1、谷歌浏覽器調試界面友好，性能強大，下面簡單介紹開發者工具的幾個超級使用的調試技巧。

2、Ctrl P快速搜尋文件

當DevTools被打開的時候，按Ctrl P,就能快速搜尋和打開你項目的文件。

3、Ctrl Shift F搜索一個特定的字符串

如果你希望在源代碼中搜索要怎麼辦呢？在頁面已經加載的文件中搜尋一個特定的字符串，快捷鍵是Ctrl Shift F，這種搜尋方式還支持正則表達式哦

4、Console控制台

想必大家都在用 console.log 在控制台輸出點東西，其實console還有其它的方法：

console.log("打印字符串");//在控制台打印自定義字符串 console.error("我是個錯誤");//在控制台打印自定義錯誤信息 console.info("我是個信息");//在控制台打印自定義信息 console.warn("我是個警告");//在控制台打印自定義警告信息 console.debug("我是個調試");//在控制台打印自定義調試信息 cosole.clear();//清空控制台（這個下方截圖中沒有）

5、Sources資源

我們可以找到當然浏覽器頁面中的js 源文件，方便我們查看和調試，針對壓縮之後的代碼，我們可以點擊下面的{}大括号按鈕将代碼轉成可讀格式

文件原壓縮的代碼:

轉換成可讀格式的代碼:

6、Sinppets創建一個新的片段文件比如當我們想不起某個方法的具體使用時候，會打開控制台随意寫一些測試代碼，或者想測試一下剛剛寫的方法是否會出現期待的樣子，但是控制台一打回車本想換行但是卻執行剛寫的半截代碼.

所以推薦使用Sources下面的左側的Sinppets代碼片段按鈕這時候點擊創建一個新的片段文件，寫完測試代碼後把鼠标放在新建文件上run，再結合控制台查看相關信息

新建了一個名叫：app.js的片段代碼，在你的項目環境頁面内，該片段可執行項目内的方法

7、Call Stack調用棧

當斷點執行到某一程序塊處停下來後，右側調試區的 Call Stack 會顯示當前斷點所處的方法調用棧，從上到下由最新調用處依次往下排列，Call Stack 列表的下方是Scope Variables列表可以查看此時局部變量和全局變量的值。圖中可以看出，我們最先走了toggleTab這個方法，然後走到了一個更新對象的方法上，當前調用在哪裡，箭頭會幫你指向哪裡，同時我們可以點擊，調用棧列表上的任意一處，即可回頭再去看看代碼

但是若你想從新從某個調用方法出執行，可以右鍵Restart Frame(我測試時未發現該功能)， 斷點就會跳到此處開頭重新執行，Scope 中的變量值也會依據代碼從新更改，這樣就可以回退來從新調試，錯過的調試也可以回過頭來反複查看

8、顯示和修改變量值

在Console中直接輸入變量，或是在Source中選擇變量，然後點擊右鍵，在右鍵菜單中選擇" evaluate selected text in console "，就可以在Console中顯示變量的值了。也可以直接在Console中輸入變量名=變量值，就可以修改變量的值了，相當于我們無需借助編輯器就可以調試線上的數據

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!