成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

你不知道的Chrome DevTools（2）：那些debug的技巧

warnerwu / 2180人閱讀

摘要：我打算把一些上使用的高級(jí)技巧寫成你不知道的這一系列的博文，希望大家一起學(xué)習(xí)學(xué)習(xí)。然而，這還不是最嚴(yán)重的，因?yàn)榈恼Z法比較寬松和隨意，所以同一功能多種寫法，各種奇葩都有?？偨Y(jié)前端在調(diào)試代碼的時(shí)候，知道開發(fā)工具上的小技巧，可以提高查找問題的效率。

Web前端開發(fā)過程中必然會(huì)用到Chrome瀏覽器自帶的開發(fā)者工具Chrome DevTools，使用它作為Web前端開發(fā)性能調(diào)試的必備工具。就連隔壁的產(chǎn)品小哥都知道打開F12改一下頁面元素的標(biāo)簽代碼就能看到頁面效果，這年頭誰不會(huì)用Chrome開發(fā)者工具呀。

但是Chrome能做的遠(yuǎn)不止你平常用的那么簡單，這一個(gè)小小的開發(fā)工具集成了很多高級(jí)的功能你未必知道。我打算把一些Chrome DevTools上使用的高級(jí)技巧寫成《你不知道的Chrome DevTools》這一系列的博文，希望大家一起學(xué)習(xí)學(xué)習(xí)。

關(guān)于web前端的調(diào)試

在描述怎么用Chrome的開發(fā)工具來進(jìn)行web前端應(yīng)用調(diào)試前，有必要嘮叨一下web前端的調(diào)試。眾所周知，因?yàn)镴avaScript這種語言的解析性的關(guān)系，在瀏覽器中調(diào)試頁面的JS代碼顯得非常的麻煩。沒有C和Java那種編譯器帶的調(diào)試工具，沒有很好的語法定位和變量監(jiān)控的，所以有時(shí)候頁面出錯(cuò)也不知道來自哪里。然而，這還不是最嚴(yán)重的，因?yàn)镴S的語法比較寬松和隨意，所以同一功能多種寫法，各種奇葩bug都有。web前端開發(fā)依賴的瀏覽器環(huán)境才是最坑爹的地方，不同的瀏覽器之間存在大量的兼容性問題。

Anyway，相信以后JS的發(fā)展或者工具的發(fā)展讓web前端的調(diào)試變得舒服高效。

不簡單的sources面板

debug第一步就是打開Chrome開發(fā)工具的sources面板。。。（這么簡單的道理還用你來說？?。┖呛?，sources面板其實(shí)不簡單。用過類似sublime text的代碼編輯器都知道一些快捷鍵，例如ctrl+p用來打開一個(gè)文件、ctrl+shift+f用來全局搜索關(guān)鍵字。其實(shí)在Chrome開發(fā)工具也有類似的快捷鍵。

ctrl+o 打開一個(gè)js文件

ctrl+p 同ctrl+o

ctrl+f 查找當(dāng)前js文件中的關(guān)鍵字

ctrl+shift+f 全局查找關(guān)鍵字

ctrl+shift+e 在控制臺(tái)運(yùn)行當(dāng)前選中的代碼片段

值得一提的是ctrl+shift+e這個(gè)快捷鍵，可以立馬在控制臺(tái)運(yùn)行當(dāng)前選中的代碼片段。相信做過js的debug的時(shí)候，大家都有這樣的經(jīng)驗(yàn)，想看當(dāng)前代碼中某句代碼的執(zhí)行結(jié)果，只好先選中復(fù)制這段代碼，打開控制臺(tái)，粘貼代碼，回車運(yùn)行看結(jié)果。這么長的流程，全交給ctrl+shift+e這個(gè)快捷鍵，贊吧！

斷點(diǎn)

給代碼添加斷點(diǎn)的方法有兩種，在代碼中寫debugger和在source面板中鼠標(biāo)單擊添加斷點(diǎn)。兩者的不同點(diǎn)在于：鼠標(biāo)單擊的方式會(huì)在代碼行數(shù)改變的時(shí)候無法定位到之前的位置，但可以在調(diào)試的過程中刪除斷點(diǎn)；debugger的方式不會(huì)因?yàn)榇a行數(shù)改變而定位不到，但必須要刷新代碼才能把斷點(diǎn)刪掉。

簡單的debug流程基本上就是交替使用下面幾個(gè)按鈕或者快捷鍵。

這里介紹一個(gè)小技巧：如果添加“條件判斷”的斷點(diǎn)？相信大家在調(diào)試的時(shí)候，最煩就是在for循環(huán)中的斷點(diǎn)了，需要不斷地按下一步來在循環(huán)中找到要驗(yàn)證的數(shù)據(jù)。在代碼中添加debugger的方式可以這么寫：

for(var i = 0; i < length; i++){
    if(i === 2){
        debugger;
    }
}

其實(shí)也不用這么麻煩的，在斷點(diǎn)的地方右鍵，選擇“Edit breakpoint”就可以寫上你想出現(xiàn)調(diào)試的條件表達(dá)式。

另外，當(dāng)你在Chrome開發(fā)工具中配置了workspace之后，你就可以直接在source面板上編輯代碼并保存代碼了，相當(dāng)方便。當(dāng)然，這只針對(duì)本地開發(fā)的代碼，對(duì)于線上的代碼就無能為力了。

代碼格式化

目前線上的js代碼基本上都是做個(gè)壓縮和變量名混淆的，這樣對(duì)于js代碼的體積壓縮有好處，但對(duì)于要調(diào)試的前端工程師來說，卻是個(gè)大麻煩。

上圖的按鈕就是為這種情況而生的，點(diǎn)擊它就能格式化當(dāng)前的代碼，變成有換行格式的代碼，閱讀起來不再那么晦澀難懂。
然而，變量名還是一些簡單的字母，看起來還是非常的費(fèi)勁。有辦法把混淆的變量名變回原本的變量名嗎？
答案是有的！不過需要原先的代碼支持source map。
source map其實(shí)是在代碼在發(fā)布的時(shí)候聲明它的變量替換的規(guī)則文件。例如在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則表示該變量名字出現(xiàn)的位置。具體的位置規(guī)則是利用了VLQ編碼，有興趣的同學(xué)可以自己去挖掘。如果你想簡單點(diǎn)，就直接使用Google的Closure編譯器來創(chuàng)建這樣的map文件。

總結(jié)

前端ers在調(diào)試js代碼的時(shí)候，知道Chrome開發(fā)工具上的小技巧，可以提高查找問題的效率。

寫在最后的話：本文基本上是在參考了Google的DevTools文檔之后，結(jié)合自己的經(jīng)驗(yàn)來寫的，目的是把文檔中說到的一些特別的方法介紹給大家，如果想多點(diǎn)了解，可以到Google的DevTools文檔看看。致謝！

參考文獻(xiàn)

https://developers.google.com/chrome-developer-tools/?hl=zh-cn

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/78043.html

相關(guān)文章

  • 你不知道的Chrome DevTools（1）：神奇的console

    摘要：我打算把一些上使用的高級(jí)技巧寫成你不知道的這一系列的博文，希望大家一起學(xué)習(xí)學(xué)習(xí)。在代碼中使用的最簡單的用法就是寫個(gè)在控制臺(tái)打印一行消息。跟的區(qū)別在于會(huì)對(duì)輸出的對(duì)象進(jìn)行展開。用于顯示一組的控制臺(tái)輸出，要搭配來使用。 Web前端開發(fā)過程中必然會(huì)用到Chrome瀏覽器自帶的開發(fā)者工具Chrome DevTools，使用它作為Web前端開發(fā)性能調(diào)試的必備工具。就連隔壁的產(chǎn)品小哥都知道打開F12...

    KevinYan 評(píng)論0 收藏0

  • 你不知道的Chrome DevTools（4）：推薦幾款DevTools插件

    摘要：下面推薦幾款插件，有些是博主親自試用過的，希望對(duì)大家的開發(fā)調(diào)試有幫助。這有點(diǎn)類似前面說過的插件。類似的針對(duì)不同框架的調(diào)試工具還有最后介紹的不是的插件，而是主題?？偨Y(jié)好的，這次的插件就推薦了這幾個(gè)。 Web前端開發(fā)過程中必然會(huì)用到Chrome瀏覽器自帶的開發(fā)者工具Chrome DevTools，使用它作為Web前端開發(fā)性能調(diào)試的必備工具。就連隔壁的產(chǎn)品小哥都知道打開F12改一下頁面元素的...

    svtter 評(píng)論0 收藏0

  • Chrome 控制臺(tái)常用調(diào)試技巧詳解

    1、Chrome控制臺(tái)小技巧 打開和關(guān)閉抽屜式選項(xiàng)卡：按Esc鍵可打開和關(guān)閉 DevTools 的 Drawer（抽屜式選項(xiàng)卡） 在Drawer（抽屜式選項(xiàng)卡）中，你可以在 Console 控制臺(tái)中執(zhí)行命令，查看動(dòng)畫檢查器(Animations)，配置網(wǎng)絡(luò)條件(network conditions)和渲染(rendering)設(shè)置，搜索(search)字符串和文件等 showImg(https...

    JouyPub 評(píng)論0 收藏0

  • Chrome 控制臺(tái)常用調(diào)試技巧詳解

    1、Chrome控制臺(tái)小技巧 打開和關(guān)閉抽屜式選項(xiàng)卡：按Esc鍵可打開和關(guān)閉 DevTools 的 Drawer（抽屜式選項(xiàng)卡） 在Drawer（抽屜式選項(xiàng)卡）中，你可以在 Console 控制臺(tái)中執(zhí)行命令，查看動(dòng)畫檢查器(Animations)，配置網(wǎng)絡(luò)條件(network conditions)和渲染(rendering)設(shè)置，搜索(search)字符串和文件等 showImg(https...

    trigkit4 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<