Chrome開發者工具Debug入門

者按： 手把手教你擺脫console.log，掌握高級的debug方法。

原文: Learn How To Debug JavaScript with Chrome DevTools
譯者: Fundebug

為了保證可讀性，本文采用意譯而非直譯。另外，本文版權歸原作者所有，翻譯僅用于學習。

作為一個剛入門的開發者，找到BUG的根源并修復通常要花費不少功夫。往往會嘗試在代碼中隨機用console.log打印變量值來尋找問題。

這篇文章教會你正確的Debug姿勢。你將會學會使用谷歌開發者工具(Chrome Developer Tools)來設置斷點并單步執行代碼。相比于打印日志，這樣會高效得多。

本文針對一種特定類型的問題來演示如何使用谷歌開發者工具Debug，該方法同樣適用于其它通用問題。

第一步：復現BUG

Debugging的第一步往往是復現bug。“復現BUG”是指找到一個行為序列可以100%觸發bug。你需要復現bug很多遍，因此，盡量消除不必要的步驟。

參照下面的流程來復現這篇文章將要修復的一個bug：

這里有一個我們要使用到的網頁。在新的標簽打開它：打開Demo
在Number 1的輸入框輸入5
在Number 2的輸入框輸入1
點擊Add Number 1 and Number 2按鈕
在下方會輸出5 + 1=51

應該輸出為6, 而不是51。

Fundebug的JavaScript錯誤監控插件能夠捕獲各種前端BUG，并且記錄用戶行為，可以幫助你及時發現和復現BUG。

第二步：使用斷點來暫停代碼執行

谷歌開發者工具可以讓你終端代碼執行，并查看此時所有的變量值。用來中斷執行的工具叫做breakpoint。如下操作：

回到Demo頁面，打開開發者工具(Mac: Command + Option + I, Window, Linux: Control + Shift + I)。
點擊Source標簽
點擊Event Listener Breakpoints，將里面的內容展開。開發者工具會展開一列，其中包含Animation，Clipboard
將鼠標移到Mouse前面, 點擊三角展開里面的內容
選中click

回到demo，點擊Add Number 1 and Number 2。開發者工具會將Demo的執行暫停，并且在Source部分高亮如下代碼：

function onClick() {

為什么？

當你在Event Listener Breakpoints選擇了Mouse click, 那么所有的點擊事件都會被設置斷點。因此，任何一個節點被點擊，并且該節點有定義點擊事件，那么開發者工具(DevTools)會自動在該點擊事件Handler的第一行處暫停。

第三步：單步執行調試代碼

一個常見的bug是：腳本的執行順序錯誤。單步調試讓你一步一步跟著代碼的執行邏輯走，一次移動一行代碼，那么你就會清楚代碼是按照哪個的順序執行的。我們來試一下：

在開發者工具的Source面板，點擊第三個(Step into next function call)，

Step into next function call

該按鈕引導你單步執行定義的點擊事件，一次一行。點擊后，第15行代碼高亮：

現在點擊第二個(Step over next function call)按鈕

Step over next function call

該按鈕會跳過當前要執行的函數inutsAreEmpty，而不是進入該函數。同時直接跳到第19行，因為當前輸入框不為空。

這就是單步調試代碼的基本思路。如果你仔細閱讀get-started.js，會發現bug可能就隱藏在updateLabel函數的某個地方。除了使用單步調試以外，你還可以使用另一種斷點。

第四步：設置另一個斷點

如果你想在某一行設置斷點，可以使用行斷點(line-of-code breakpoint)。

找到updateLabel函數的最后一行，

label.textContent=addend1 + ' + ' + addend2 + '=' + sum;

在代碼的左邊，你可以看到顯示的行號32。點擊32，開發者工具會在行號出顯示一個藍色的標記。該標記表示行斷點設置成功。代碼總會在執行到這一行的時候中斷。

點擊第一個Resume script execution按鈕

Resume script execution button

代碼會持續執行到第32行。

在左側，Local部分已經將addend1，addend2和sum的值都顯示出來了。
你就會發現它們都是字符串，字符串相加就是將它們拼接起來，然而我們想要的是數字求和。

第五步：檢查變量值

另一個常見的情況就是變量或則函數的返回值和期望值不一樣。很多開發者都使用console.log來查看值的變化，但是使用console.log很麻煩而且非常低效。首先，你需要手動添加很多console.log，其次，在你還不清楚哪個變量會引發bug之前，你需要把很多變量值打印出來。

谷歌開發者工具一個很好的功能就是觀察表達式(Watch Expressions)，可以一直監控變量值的變化。觀察表達式不僅可以用于觀察變量值，你可以用來監控任意表達式。我們來試一試：

在開發者面板下的Source面板，點擊Watch,展開里面的內容(初次展開為空)。
點擊右側的+號(Add Expression)

Add Expression button

輸入typeof sum
敲擊回車鍵。開發者面板會顯示typeof sum: "string"。

正如我們推測：sum的類型是字符串。

console.log的另一個替代品是直接使用Console。我么可以使用Console來執行任意的JavaScript表達式。開發者通常使用Console來重寫變量值來debug。我們可以使用Console來驗證可能的解決方案。

如果Console沒有顯示出來，敲擊ESC鍵來打開。它會在開發者面板的最下方打開。
在Console中輸入parseInt(addend1) + parseInt(addend2)
敲擊回車鍵，輸出6。

第六步：修復BUG

我們已經找到了潛在的修復方案，無需離開開發者面板，我們可以直接在開發者面板編輯源代碼。

在開發者工具的Source面板，將源代碼中var sum=addend1 + addend2替換為var sum=parseInt(addend1) + parseInt(addend2);。
保存改動(Mac: Command + S, Window, Linux: Control + S)。
點擊第五個Deactivate breakpoints按鈕

Deactivate breakpoints button

該按鈕取消所有設置的斷點。

點擊第一個Resume script execution按鈕

Resume script execution button

輸入不同的值試一試，看看是否可以正常執行。

本文脫胎于Kayce Basques的一篇文章Get Started with Debugging JavaScript in Chrome DevTools。

原文作者：fundebug

dea 至于介紹就看官網就ok了，https://www.jetbrains.com/idea/download/other.html

一、基本用法&快捷鍵

Debug主要對應的是橫向的一條和縱向的一條：

1、首先說第一組按鈕，共8個按鈕，從左到右依次如下：

Show Execution Point (Alt + F10)：如果光標在其它行或其它頁面，點擊這個按鈕可跳轉到當前代碼執行的行。
Step Over (F8)：步過，一行一行地往下走，如果這一行上有方法不會進入方法。
Step Into (F7)：步入，如果當前行有方法，可以進入方法內部，一般用于進入自定義方法內，不會進入官方類庫的方法。
Step Out (Shift + F8)：步出，從步入的方法內退出到方法調用處，此時方法已執行完畢，但還沒有完成賦值。
Drop Frame (默認無)：回退斷點，第八節詳細說明
Run to Cursor (Alt + F9)：運行到光標處，你可以將光標定位到你需要查看的那一行，然后使用這個功能，代碼會運行至光標行，而不需要打斷點。

斷點的右鍵：

enable：該斷點是否是斷點
Suspend：多線程斷點
Condition：條件斷點

查看斷點處的某個對象的值，可以:alter + click，按住alter，然后點擊想看的變量

二、計算表達式

計算表達式有兩個作用：

查看表達式的值
設置表達式的值

設置表達式的值：

方法一：該案例是設置表達式的值a=20;

方法二：

在變量右鍵，set Value的值進行設置值。

三、方法斷點

方法斷點是三角形的斷點，主要的作用是，點擊F9，

進入到方法中第一行和最后的一行

在接口上打斷點，當一個接口有多個實現類，在接口的方法上打斷點，可以快速的定位到具體的實現類上

四、異常斷點

哪里有異常，斷點就會停留在哪兒，比如下面的空指針異常，程序會停留在報空指針異常的代碼行中！

程序停止在拋出異常的那一行（使用這種方法尋找出現空指針的代碼位置是非常容易的！）

五、字段斷點

在設置復雜值的時候會看到，該值是如何變化的，就可以設置字段斷點，在寫的過程會停頓！！

在每次改變值的時候就會用到字段斷點

第一次設置的age的值是10

第二次設置的值為：20

六、條件斷點

debug的時候，i=50就直接進行停頓

七：調試的時候加載變化的代碼

希望在調試的時候能加載到變化的代碼：

avaScript 是網景（Netscape）公司開發的一種基于客戶端瀏覽器、面向（基于）對象、事件驅動式的網頁腳本語言。JavaScript語言的前身叫作Livescript。

JavaScript的特點：

簡單、易學、易用；
跨平臺；IE、Navigator
符合ECMA（歐洲計算機制造協會）標準，可移植；
事件驅動式的腳本程序設計思想；
動態、交互式的操作方式。

JavaScript的作用：

交互式操作；
表單驗證；
網頁特效；
Web游戲
服務器腳本開發等。

JavaScript的編寫環境：

文本編輯器

JavaScript的執行平臺：

Web瀏覽器

JavaScript的執行方式：

解釋執行（由上而下）

JavaScript的版本：

JavaScript1.0——JavaScript1.4

瀏覽器對JavaScript的支持：

JavaScript/IE3.0、JavaScript1.2/IE4.0；

微軟允許用戶自行設置對JavaScript處理模式。

JavaScript與Java、VBScript、JScript的關系：

JavaScript與Java的區別體現在：

首先，它們是兩個公司開發的不同的兩個產品，Java是SUN公司推出的新一代面向對象的程序設計語言，特別適合于Internet應用程序開發；而JavaScript是Netscape公司的產品，其目的是為了擴展Netscape Navigator功能而開發的一種可以嵌入Web頁面中的基于對象和事件驅動的解釋性語言。

其次，JavaScript是基于對象的，而Java是面向對象的，即Java是一種真正的面向對象的語言，即使是開發簡單的程序，必須設計對象。JavaScript是種腳本語言，它可以用來制作與網絡無關的，與用戶交互作用的復雜軟件。它是一種基于對象和事件驅動的編程語言。因而它本身提供了非常豐富的內部對象供設計人員使用。

第三，兩種語言在其瀏覽器中所執行的方式不一樣。Java的源代碼在傳遞到客戶端執行之前，必須經過編譯，因而客戶端上必須具有相應平臺上的仿真器或解釋器，它可以通過編譯器或解釋器實現獨立于某個特定的平臺編譯代碼的束縛。JavaScript是一種解釋性編程語言，其源代碼在發往客戶端執行之前不需經過編譯，而是將文本格式的字符代碼發送給客戶，由瀏覽器解釋執行。

第四，兩種語言所采取的變量是不一樣的。Java采用強類型變量檢查，即所有變量在編譯之前必須作聲明。JavaScript中變量聲明，采用其弱類型。即變量在使用前不需作聲明，而是解釋器在運行時檢查其數據類型。

第五，代碼格式不一樣。Java是一種與HTML無關的格式，必須通過像HTML中引用外媒體那么進行裝載，其代碼以字節代碼的形式保存在獨立的文檔中。JavaScript的代碼是一種文本字符格式，可以直接嵌入HTML文檔中，并且可動態裝載。編寫HTML文檔就像編輯文本文件一樣方便。

第六，嵌入方式不一樣。在HTML文檔中，兩種編程語言的標識不同，JavaScript使用<script>...</script>來標識，而Java使用<applet> ... </applet> 來標識。

第七，靜態綁定和動態綁定。Java采用靜態聯編，即Java的對象引用必須在編譯時的進行，以使編譯器能夠實現強類型檢查，如不經編譯則就無法實現對象引用的檢查。JavaScript采用動態聯編，即JavaScript的對象引用在運行時進行檢查。

JavaScript學習教程

如果想要更高效、更系統地學會javascript，最好采用邊學邊練的學習模式。

今天分享的這套JavaScript學習教程，講解了前端開發中的核心技術JavaScript，俗稱JS

內容涵蓋：JavaScript核心語法、JavaScript內置支持類、JavaScript調試、JavaScript DOM編程、JavaScript BOM編程、大量前端小案例、JavaScript事件處理、JavaScript對象、繼承、JSON等知識點，該視頻可以開啟你的WEB前端之路。

課程目錄

1. .JavaScript教程-JavaScript概述

2. .JavaScript教程-HTML嵌入JavaScript代碼的第一種方式1

3. .JavaScript教程-HTML嵌入JavaScript代碼的第一種方式2

4. .JavaScript教程-HTML嵌入JavaScript代碼的第二種方式

5. .JavaScript教程-HTML嵌入JavaScript代碼的第三種方式

6. JavaScript教程-JS的標識符

7. .JavaScript教程-JS的變量1

8. .JavaScript教程-JS的變量2

9. JavaScript教程-JS的函數初步1

10. .JavaScript教程-JS的函數初步2

11. .JavaScript教程-全局變量和局部變量

12. .JavaScript教程-JS的數據類型

13. .JavaScript教程-Undefined數據類型

14. .JavaScript教程-Number數據類型

15. .JavaScript教程-Boolean數據類型

16. .JavaScript教程-回顧數據類型

17. .JavaScript教程-String數據類型

18. .JavaScript教程-Object數據類型

19. JavaScript教程-Object數據類型2

20. .JavaScript教程-Object數據類型3

21. .JavaScript教程-null undefined NaN的區別以及等同和全等運算符

22. .JavaScript教程-JS的常用事件

23. .JavaScript教程-回調函數的概念

24. .JavaScript教程-注冊事件的兩種方式

25. JavaScript教程-JS代碼的執行順序

26. .JavaScript教程-JS代碼的執行順序2

27. JavaScript教程-捕捉回車鍵

28. .JavaScript教程-捕捉回車鍵2

29. .JavaScript教程-void運算符

30. .JavaScript教程-JS的控制語句

31. JavaScript教程-設置和獲取文本框的value

32. JavaScript教程-innerHTML和innerText屬性

33. .JavaScript教程-正則表達式

34. .JavaScript教程-郵箱地址的正則表達式

35. JavaScript教程-擴展字符串的trim函數

36. .JavaScript教程-回顧JS

37. JavaScript教程-表單驗證

38. JavaScript教程-表單驗證2

39. JavaScript教程-表單驗證3

40. .JavaScript教程-表單驗證4

41. .JavaScript教程-復選框的全選和取消全選

42. .JavaScript教程-獲取下拉列表選中項的value

43. .JavaScript教程-周期函數setInterval

44. .JavaScript教程-內置支持類Array

45. .JavaScript教程-BOM編程window的open和close

46. .JavaScript教程-BOM編程彈出確認框

47. .JavaScript教程-（補錄）-將當前窗口設置為頂級窗口

48. .JavaScript教程-BOM編程history和location對象

49. .JavaScript教程-JSON在開發中的使用

50. .JavaScript教程-JSON在開發中的使用2

51. JavaScript教程-JSON在開發中的使用3

52. .JavaScript教程-JSON在開發中的使用4

53. JavaScript教程-JSON在開發中的使用5

關注+轉發本文后私信扣“1”

在線咨詢

上一篇：HTML 文件路徑
下一篇：HTML5開啟移動互聯時代新大陸

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商