很抱歉缸榄，這文章是我好久之前寫的 圖片是存在有道云的孝偎，不知道為什么在移動端無法加載
常用快捷鍵
chrome快捷鍵 左右切換tag頁
left: ctrl + pgup
right: ctrl + pgdn
new tab: ctrl + t
1.文件快速切換
快捷鍵Ctrl + P 就可以快速查找你的工程文件。
2.源代碼內(nèi)部查找
如果你想要查找源代碼的內(nèi)容砚殿，你可以使用Ctrl + Shift + F (Cmd + Opt + F)并輸入字符串關(guān)鍵詞霸旗。
3.到某一行
當你在Chrome DevTools中打開一個源文件圣絮，你可以指定到任意一行，用快捷鍵 Ctrl + G (Windows 和 Linux), 或者 Cmd + L (Mac)并輸入你想跳到哪一行灌灾。
你也可以示用Ctrl + O搓译，并輸入“：”+第幾行。
4.在控制臺中選中元素
在DevTools中你可以手動選擇DOM元素锋喜。
$() 返回符合當前CSS選擇器的第一個元素些己，例如 $(‘div’) 會返回頁面中第一個div元素。
$$() 返回符合當前CSS選擇器的一串 好多個 不是一個元素嘿般。
（下面的圖是我在網(wǎng)上搜集的轴总，自己寫肯定沒有這個配圖說的清楚）
開發(fā)者工具面板各個板塊介紹
Elements
常用方法：
1.鼠標移動到元素上會在原網(wǎng)頁上顯示藍色印記；
2.在開發(fā)者工具下面顯示元素在HTML里的位置關(guān)系博个；
3.在styles選項中編輯該元素的樣式怀樟，并且看到html結(jié)構(gòu)的實時更新；
4.左上角的箭頭盆佣，鼠標點擊后往堡，移動到網(wǎng)頁，下面會自動跳轉(zhuǎn)到相應(yīng)的元素上共耍；
選中一個元素虑灰，右擊鼠標，你會看到有一個彈出窗口出現(xiàn)痹兜，里面有若干選項
Add attribut: 為該元素添加屬性
Edit attribute：修改該元素的屬性
Force element state： 為元素激活某種狀態(tài)（主要用在可以幾乎的元素比如a穆咐、input、button等）
Edit as HTML：編輯該元素（你可以重寫它的整個content）甚至修改它的標簽名稱
Break on：為該元素添加dom操作事件監(jiān)聽。
在element里可以調(diào)試css查看html的DOM对湃，這些都是平常最常用的功能
然后chrome最可愛的css顏色選擇崖叫，當你點擊一個css的color屬性后，就會出現(xiàn)下圖拍柒，你就可以選擇自己喜歡的顏色了心傀，而且這時你移動鼠標到頁面上任意位置會出現(xiàn)一個放大鏡一樣的取景器，點擊就會在elelment面板上顯示你點擊位置的顏色相關(guān)信息拆讯。脂男。。种呐。宰翅。
點擊color屬性可以在rgba、hsl和hexadecimal中間來回切換顏色的格式
就像這樣爽室。堕油。。肮之。
DevTools有一個可以模擬CSS狀態(tài)的功能掉缺，例如元素的hover和focus,可以很容易的改變元素樣式。在CSS編輯器中可以利用這個功能
Network
Network是一個監(jiān)控當前網(wǎng)頁所有的http請求的面版戈擒，它主體部分展示的是每個http請求眶明，每個字段表示著該請求的不同屬性和狀態(tài)
Name：請求文件名稱
Method：方法（常見的是get post）
Status：請求完成的狀態(tài)
Type：請求的類型
Initiator：請求源也就是說該鏈接通過什么發(fā)送（常見的是Parser、Script）
Size：下載文件或者請求占的資源大小
Time：請求或下載的時間
Timeline：該鏈接在發(fā)送過程中的時間狀態(tài)軸（我們可以把鼠標移動到這些紅紅綠綠的時間軸上筐高，對應(yīng)的會有它的詳細信息：開始下載時間搜囱，等待加載時間，自身下載耗時）
2.單擊面板中的任意一條http信息柑土，會在底部彈出一個新的面板蜀肘，其中記錄了該條http請求的詳細參數(shù)header（表頭信息、返回信息稽屏、請求基本狀態(tài)—請參看http1.1協(xié)議內(nèi)容對號入座）扮宠、Preview（返回的格式化轉(zhuǎn)移后文本信息）、response（轉(zhuǎn)移之前的原始信息）狐榔、Cookies（該請求帶的cookies）坛增、Timing（請求時間變化）
位置1：filter過濾器，可在輸入框中輸入關(guān)鍵字搜索對應(yīng)請求的文件薄腻。
位置2：請求文件的列表里進行了分類收捣，個人常用的是查看XHR的分類，查看Ajax請求庵楷。
位置3：設(shè)置網(wǎng)絡(luò)的通信方式罢艾。默認"No thirotting"不節(jié)流楣颠。這里可以設(shè)置斷網(wǎng)模式，或者模擬3G咐蚯，4G網(wǎng)絡(luò)等情況下頁面加載的速度童漩。網(wǎng)速可以在"settings"里面設(shè)置。
Sources
sources面板是調(diào)試中最常用的地方仓蛆。
位置1：查看頁面中加載的資源文件
位置2：如果瀏覽器裝了插件睁冬，插件所需要的JS文件會在這里顯示
位置3：使用ctrl+p/ctrl+o 打開某個文件
位置4：斷點的操作
位置5：查看異步請求時所設(shè)置的定時器
位置6：點擊右邊的加號挎春，可以增加監(jiān)聽的變量看疙。不過鼠標放到JS文件中的變量時也會顯示對應(yīng)的值。
位置7：設(shè)置各種不同的斷點直奋。
當勾選XHR Breakpoints里的any XHR時能庆，頁面中觸發(fā)Ajax請求時都會中斷。
當勾選"Event listener breakpoint" 下的 Mouse（鼠標）下的 Click （單擊）事件時脚线，觸發(fā)某個按鈕的點擊事件就會中斷搁胆。
位置8：一般線上的代碼都是打包后的代碼，不利于調(diào)試邮绿。點擊{}后格式化該文件渠旁。
這里我再就說一下怎么使用sources這個面板進行一些js的調(diào)試：
圖中的4號區(qū)域有6個按鍵（有的版本這幾個按鍵位置在source下面）
當你調(diào)試時按下第一個暫停（快捷鍵f8）,js停止運行，然后點擊第三個想箭頭一樣的按鈕（快捷鍵f10）船逮，javascript執(zhí)行下一句顾腊，同理另一個箭頭按鈕表示向上執(zhí)行，返回上一句js的狀態(tài)挖胃。
設(shè)置斷點：（當4號區(qū)域第五個按鈕按下時）點擊sources中間的代碼行數(shù)杂靶，就會在這里設(shè)置一個斷點，藍色時表示激活斷點酱鸭，再次點擊取消吗垮，這樣刷新頁面直接執(zhí)行到你設(shè)置的斷點處。
然后我就必須提一個比較可愛的功能了凹髓。烁登。。蔚舀。防泵。代碼美化。蝗敢。捷泞。。寿谴。
以前看源碼跟個鬼一樣 所有js css全堆在一起锁右，是個正常人都看不懂，但chrome在sources源代碼的部分下面有一個按鍵 “{}” 點擊后你就會發(fā)現(xiàn)世界美好了，咏瑟，拂到，，码泞，
想快速的找到你點擊某個特定的按鈕或者鏈接的運行代碼兄旬，只需要在你點擊按鈕前啟用“Event listener breakpoint” Mouse：mouseover還有mouseout
我在div上寫了一個mouseover的js當js檢測到有運行到mouseover時就會顯示出mouseover執(zhí)行的function（）
你就可以看看事件是怎么執(zhí)行的了
但使用這個功能可能會進入到第三方的代碼庫像jQuery,這時候你就需要花費一些調(diào)試的時間來到達真正的事件處理函數(shù)。最好的方法是標記“Blackbox Script”避免進入到第三方的腳本余寥。調(diào)試時就再不會進入第三方的腳本庫了领铐，代碼會一直運行到?jīng)]有標記blackboxed的文件為止。你可以blackbox腳本通過右擊調(diào)用棧里的第三方庫的文件宋舷，并從上下文菜單中選擇“Blackbox Script”即可：
然而一般我不用jquery
console
Rainbow Text(一個小效果)
console.log('%cRainbow Text ', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22),
color-stop(0.15, #f2f),
color-stop(0.3, #22f),
color-stop(0.45, #2ff),
color-stop(0.6, #2f2),
color-stop(0.75, #2f2),
color-stop(0.9, #ff2),
color-stop(1, #f22) );
color:transparent;-webkit-background-clip: text;font-size:5em;');
console.time & console.timeEnd 計算耗時
對代碼執(zhí)行的耗時情況進行測試時绪撵，處理手工在代碼中創(chuàng)建前后兩個時間戳進行對比，在dev tools中祝蝠，我們可以使用console.time與 console.timeEnd實現(xiàn)音诈。
console.time("測試用時");
var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
array[i] = new Object();
};
console.timeEnd("測試用時");
關(guān)閉Console界面
console.log：普通信息
console.log('%c你好','color:red;','小明','你知道被媽媽打了么');
console.info：提示類信息
console.error：錯誤信息
console.warn：警示信息
var data = [{'品名': ‘室友', '數(shù)量': 4}, {'品名': '電腦', '數(shù)量': 9}];
console.table(data);顯示圖表
另外，console.log() 接收不定參數(shù)绎狭，參數(shù)間用逗號分隔细溅，最終會輸出會將它們以空白字符連接。
console.assert
當你想代碼滿足某些條件時才輸出信息到控制臺儡嘶，那么你大可不必寫if或者三元表達式來達到目的喇聊，cosole.assert便是這樣場景下一種很好的工具，它會先對傳入的表達式進行斷言社付，只有表達式為假時才輸出相應(yīng)信息到控制臺承疲。
var isDebug=false;
console.assert(isDebug,'開發(fā)中的log信息。鸥咖。燕鸽。');
console.count
除了條件輸出的場景，還有常見的場景是計數(shù)啼辣。
當你想統(tǒng)計某段代碼執(zhí)行了多少次時也大可不必自己去寫相關(guān)邏輯啊研，內(nèi)置的console.count可以很地勝任這樣的任務(wù)。
function foo(){
//其他函數(shù)邏輯blah blah鸥拧。党远。。
console.count('foo 被執(zhí)行的次數(shù)：');
}
foo();
foo();
foo();
console.dir
將DOM結(jié)點以JavaScript對象的形式輸出到控制臺
而console.log是直接將該DOM結(jié)點以DOM樹的結(jié)構(gòu)進行輸出富弦，與在元素審查時看到的結(jié)構(gòu)是一致的沟娱。不同的展現(xiàn)形式，同樣的優(yōu)雅腕柜，各種體位任君選擇反正就是方便與體貼济似。
console.dir(document.body);
console.log(document.body);
console.time & console.timeEnd
輸出一些調(diào)試信息是控制臺最常用的功能矫废，當然，它的功能遠不止于此砰蠢。當做一些性能測試時蓖扑，同樣可以在這里很方便地進行。
比如需要考量一段代碼執(zhí)行的耗時情況時台舱，可以用console.time與 console.timeEnd來做此事律杠。
這里借用官方文檔的例子：
console.time("Array initialize");
var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
array[i] = new Object();
};
console.timeEnd("Array initialize");
另外值得一贊的是，Chrome 控制臺中原生支持類jQuery的選擇器竞惋，也就是說你可以用$加上熟悉的css選擇器來選擇DOM節(jié)點柜去，多么滴熟悉。
$('body')
copy
通過此命令可以將在控制臺獲取到的內(nèi)容復制到剪貼板碰声。
copy(document.body)
然后你就可以到處粘了：
這里的控制臺命令只能在控制臺中環(huán)境中執(zhí)行诡蜓，因為他不依附于任何全局變量比如window熬甫，所以其實在JS代碼里是訪問不了這個copy方法的胰挑，所以從代碼層面來調(diào)用復制功能也就無從談起。
Timeline
Timeline面板是查看動態(tài)流的造锅。在這里可以測試頁面的性能問題抱慌。比如頁面的渲染速度蜀铲，動畫的流暢度等。
位置1：點擊這個按鈕開始Record贡这，按鈕變成紅色，再次點擊停止記錄厂榛。
位置2：選擇記錄生成的圖表模式
位置3：需要記錄的類型
位置4：fps指每秒的幀數(shù)盖矫，這個可以衡量頁面的渲染速度。如果超過60fps击奶，則頁面可能需要優(yōu)化下了辈双。如果超過30fps，則頁面的卡頓現(xiàn)象會比較嚴重柜砾。
位置5：記錄期間頁面加載的比重湃望。看哪個范圍的值特別大痰驱，占用時間最長证芭，然后有針對性的優(yōu)化。
Settings
勾選下面這個選項后就會在控制臺中打印出所有的Ajax請求地址担映。
Profile（性能優(yōu)化）
性能分析（Profiler）就是分析程序各個部分的運行時間废士，找出瓶頸所在，使用的方法是console.profile()蝇完。
1: <script type="text/javascript">
2: function All(){
3: alert(11);
4: for(var i=0;i<10;i++){
5: funcA(1000);
6: }
7: funcB(10000);
8: }
9:
10: function funcA(count){
11: for(var i=0;i<count;i++){}
12: }
13:
14: function funcB(count){
15: for(var i=0;i<count;i++){}
16: }
17:
18: console.profile('性能分析器');
19: All();
20: console.profileEnd();
21: </script>
Audits 加載速度優(yōu)化參照的是雅虎前端工程師的十四條黃金建議
有趣功能
遠程調(diào)試
Android與PC雙向同步
支持在手機瀏覽器/native app中調(diào)試官硝，支持端口轉(zhuǎn)發(fā)诅挑，支持虛擬主機名映射（virtual host mapping）
準備條件：
1. Chrome32+
2. Android USB連接
3. 瀏覽器調(diào)試需要Android4.0+，以及Android Chrome（PC的Chrome要比Android版本高才行）
4. app調(diào)試需要Android4.4+泛源，以及WebView.setWebContentsDebuggingEnabled(true);
步驟：
1. 開啟USB調(diào)試拔妥，手機打開Chrome進入需要調(diào)試的頁面
2. PC打開Chrome進入chrome://inspect，勾選Discover USB devices
3. 在設(shè)備列表中點擊inspect開始遠程調(diào)試
4. 計時console.time/timeEnd(str); // 成對出現(xiàn)达箍，配合使用
設(shè)備傳感仿真
設(shè)備模式的另一個很酷的功能是模擬移動設(shè)備的傳感器没龙，例如觸摸屏幕和加速計。你甚至可以惡搞你的地理位置缎玫。這個功能位于元素標簽的底部硬纤，點擊“show drawer”按鈕，就可看見Emulation標簽 --> Sensors.
有道云真的給我印象很不好
參考這個吧
timeline 工具詳解
待讀
很多的技巧 英文 https://umaar.com/dev-tips/
