資訊專欄INFORMATION COLUMN
摘要：我打算把一些上使用的高級技巧寫成你不知道的這一系列的博文，希望大家一起學習學習。然而，這還不是最嚴重的，因為的語法比較寬松和隨意，所以同一功能多種寫法，各種奇葩都有?？偨Y前端在調試代碼的時候，知道開發工具上的小技巧，可以提高查找問題的效率。
Web前端開發過程中必然會用到Chrome瀏覽器自帶的開發者工具Chrome DevTools，使用它作為Web前端開發性能調試的必備工具。就連隔壁的產品小哥都知道打開F12改一下頁面元素的標簽代碼就能看到頁面效果，這年頭誰不會用Chrome開發者工具呀。
但是Chrome能做的遠不止你平常用的那么簡單，這一個小小的開發工具集成了很多高級的功能你未必知道。我打算把一些Chrome DevTools上使用的高級技巧寫成《你不知道的Chrome DevTools》這一系列的博文，希望大家一起學習學習。
關于web前端的調試在描述怎么用Chrome的開發工具來進行web前端應用調試前，有必要嘮叨一下web前端的調試。眾所周知，因為JavaScript這種語言的解析性的關系，在瀏覽器中調試頁面的JS代碼顯得非常的麻煩。沒有C和Java那種編譯器帶的調試工具，沒有很好的語法定位和變量監控的，所以有時候頁面出錯也不知道來自哪里。然而，這還不是最嚴重的，因為JS的語法比較寬松和隨意，所以同一功能多種寫法，各種奇葩bug都有。web前端開發依賴的瀏覽器環境才是最坑爹的地方，不同的瀏覽器之間存在大量的兼容性問題。
Anyway，相信以后JS的發展或者工具的發展讓web前端的調試變得舒服高效。
不簡單的sources面板debug第一步就是打開Chrome開發工具的sources面板。。。（這么簡單的道理還用你來說？?。┖呛?，sources面板其實不簡單。用過類似sublime text的代碼編輯器都知道一些快捷鍵，例如ctrl+p用來打開一個文件、ctrl+shift+f用來全局搜索關鍵字。其實在Chrome開發工具也有類似的快捷鍵。
ctrl+o 打開一個js文件
ctrl+p 同ctrl+o
ctrl+f 查找當前js文件中的關鍵字
ctrl+shift+f 全局查找關鍵字
ctrl+shift+e 在控制臺運行當前選中的代碼片段
值得一提的是ctrl+shift+e這個快捷鍵，可以立馬在控制臺運行當前選中的代碼片段。相信做過js的debug的時候，大家都有這樣的經驗，想看當前代碼中某句代碼的執行結果，只好先選中復制這段代碼，打開控制臺，粘貼代碼，回車運行看結果。這么長的流程，全交給ctrl+shift+e這個快捷鍵，贊吧！
斷點給代碼添加斷點的方法有兩種，在代碼中寫debugger和在source面板中鼠標單擊添加斷點。兩者的不同點在于：鼠標單擊的方式會在代碼行數改變的時候無法定位到之前的位置，但可以在調試的過程中刪除斷點；debugger的方式不會因為代碼行數改變而定位不到，但必須要刷新代碼才能把斷點刪掉。
簡單的debug流程基本上就是交替使用下面幾個按鈕或者快捷鍵。
這里介紹一個小技巧：如果添加“條件判斷”的斷點？相信大家在調試的時候，最煩就是在for循環中的斷點了，需要不斷地按下一步來在循環中找到要驗證的數據。在代碼中添加debugger的方式可以這么寫：
for(var i = 0; i < length; i++){
if(i === 2){
debugger;
}
}
其實也不用這么麻煩的，在斷點的地方右鍵，選擇“Edit breakpoint”就可以寫上你想出現調試的條件表達式。
另外，當你在Chrome開發工具中配置了workspace之后，你就可以直接在source面板上編輯代碼并保存代碼了，相當方便。當然，這只針對本地開發的代碼，對于線上的代碼就無能為力了。
目前線上的js代碼基本上都是做個壓縮和變量名混淆的，這樣對于js代碼的體積壓縮有好處，但對于要調試的前端工程師來說，卻是個大麻煩。
上圖的按鈕就是為這種情況而生的，點擊它就能格式化當前的代碼，變成有換行格式的代碼，閱讀起來不再那么晦澀難懂。
然而，變量名還是一些簡單的字母，看起來還是非常的費勁。有辦法把混淆的變量名變回原本的變量名嗎？
答案是有的！不過需要原先的代碼支持source map。
source map其實是在代碼在發布的時候聲明它的變量替換的規則文件。例如在jQuery1.9.0更高的版本的代碼，末尾有一句：
//@ sourceMappingURL=jquery.min.map
這就是聲明了它的source map文件的路徑，而source map文件里大概是這樣子的：
{
"version": 3,
"file": "jquery.min.js",
"sources":["jquery.js"],
"names": ["window","undefined","isArraylike"],
"mappings": "CAaA,SAAWA,EAAQC"
}
names就是原本的變量名字，mappings則表示該變量名字出現的位置。具體的位置規則是利用了VLQ編碼，有興趣的同學可以自己去挖掘。如果你想簡單點，就直接使用Google的Closure編譯器來創建這樣的map文件。
總結前端ers在調試js代碼的時候，知道Chrome開發工具上的小技巧，可以提高查找問題的效率。
寫在最后的話：本文基本上是在參考了Google的DevTools文檔之后，結合自己的經驗來寫的，目的是把文檔中說到的一些特別的方法介紹給大家，如果想多點了解，可以到Google的DevTools文檔看看。致謝！
參考文獻https://developers.google.com/chrome-developer-tools/?hl=zh-cn
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78043.html
摘要：我打算把一些上使用的高級技巧寫成你不知道的這一系列的博文，希望大家一起學習學習。在代碼中使用的最簡單的用法就是寫個在控制臺打印一行消息。跟的區別在于會對輸出的對象進行展開。用于顯示一組的控制臺輸出，要搭配來使用。 Web前端開發過程中必然會用到Chrome瀏覽器自帶的開發者工具Chrome DevTools，使用它作為Web前端開發性能調試的必備工具。就連隔壁的產品小哥都知道打開F12...
摘要：下面推薦幾款插件，有些是博主親自試用過的，希望對大家的開發調試有幫助。這有點類似前面說過的插件。類似的針對不同框架的調試工具還有最后介紹的不是的插件，而是主題?？偨Y好的，這次的插件就推薦了這幾個。 Web前端開發過程中必然會用到Chrome瀏覽器自帶的開發者工具Chrome DevTools，使用它作為Web前端開發性能調試的必備工具。就連隔壁的產品小哥都知道打開F12改一下頁面元素的...
1、Chrome控制臺小技巧 打開和關閉抽屜式選項卡：按Esc鍵可打開和關閉 DevTools 的 Drawer（抽屜式選項卡） 在Drawer（抽屜式選項卡）中，你可以在 Console 控制臺中執行命令，查看動畫檢查器(Animations)，配置網絡條件(network conditions)和渲染(rendering)設置，搜索(search)字符串和文件等 showImg(https...
1、Chrome控制臺小技巧 打開和關閉抽屜式選項卡：按Esc鍵可打開和關閉 DevTools 的 Drawer（抽屜式選項卡） 在Drawer（抽屜式選項卡）中，你可以在 Console 控制臺中執行命令，查看動畫檢查器(Animations)，配置網絡條件(network conditions)和渲染(rendering)設置，搜索(search)字符串和文件等 showImg(https...
閱讀 3640·2023-04-26 02:07
閱讀 3150·2021-09-22 15:55
閱讀 2534·2021-07-26 23:38
閱讀 3119·2019-08-29 15:16
閱讀 2008·2019-08-29 11:16
閱讀 1746·2019-08-29 11:00
閱讀 3583·2019-08-26 18:36
閱讀 3165·2019-08-26 13:32
