整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
者按： 手把手教你擺脫console.log，掌握高級的debug方法。
原文: Learn How To Debug JavaScript with Chrome DevTools
譯者: Fundebug
為了保證可讀性，本文采用意譯而非直譯。另外，本文版權(quán)歸原作者所有，翻譯僅用于學習。
作為一個剛?cè)腴T的開發(fā)者，找到BUG的根源并修復(fù)通常要花費不少功夫。往往會嘗試在代碼中隨機用console.log打印變量值來尋找問題。
這篇文章教會你正確的Debug姿勢。你將會學會使用谷歌開發(fā)者工具(Chrome Developer Tools)來設(shè)置斷點并單步執(zhí)行代碼。相比于打印日志，這樣會高效得多。
本文針對一種特定類型的問題來演示如何使用谷歌開發(fā)者工具Debug，該方法同樣適用于其它通用問題。
第一步：復(fù)現(xiàn)BUG
Debugging的第一步往往是復(fù)現(xiàn)bug。“復(fù)現(xiàn)BUG”是指找到一個行為序列可以100%觸發(fā)bug。你需要復(fù)現(xiàn)bug很多遍，因此，盡量消除不必要的步驟。
參照下面的流程來復(fù)現(xiàn)這篇文章將要修復(fù)的一個bug：
這里有一個我們要使用到的網(wǎng)頁。在新的標簽打開它：打開Demo
在Number 1的輸入框輸入5
在Number 2的輸入框輸入1
點擊Add Number 1 and Number 2按鈕
在下方會輸出5 + 1=51
應(yīng)該輸出為6, 而不是51。
Fundebug的JavaScript錯誤監(jiān)控插件能夠捕獲各種前端BUG，并且記錄用戶行為，可以幫助你及時發(fā)現(xiàn)和復(fù)現(xiàn)BUG。
第二步：使用斷點來暫停代碼執(zhí)行
谷歌開發(fā)者工具可以讓你終端代碼執(zhí)行，并查看此時所有的變量值。用來中斷執(zhí)行的工具叫做breakpoint。如下操作：
回到Demo頁面，打開開發(fā)者工具(Mac: Command + Option + I, Window, Linux: Control + Shift + I)。
點擊Source標簽
點擊Event Listener Breakpoints，將里面的內(nèi)容展開。開發(fā)者工具會展開一列，其中包含Animation，Clipboard
將鼠標移到Mouse前面, 點擊三角展開里面的內(nèi)容
選中click
回到demo，點擊Add Number 1 and Number 2。開發(fā)者工具會將Demo的執(zhí)行暫停，并且在Source部分高亮如下代碼：
function onClick() { |
為什么？
當你在Event Listener Breakpoints選擇了Mouse click, 那么所有的點擊事件都會被設(shè)置斷點。因此，任何一個節(jié)點被點擊，并且該節(jié)點有定義點擊事件，那么開發(fā)者工具(DevTools)會自動在該點擊事件Handler的第一行處暫停。
第三步：單步執(zhí)行調(diào)試代碼
一個常見的bug是：腳本的執(zhí)行順序錯誤。單步調(diào)試讓你一步一步跟著代碼的執(zhí)行邏輯走，一次移動一行代碼，那么你就會清楚代碼是按照哪個的順序執(zhí)行的。我們來試一下：
在開發(fā)者工具的Source面板，點擊第三個(Step into next function call)，
Step into next function call
該按鈕引導(dǎo)你單步執(zhí)行定義的點擊事件，一次一行。點擊后，第15行代碼高亮：
現(xiàn)在點擊第二個(Step over next function call)按鈕
Step over next function call
該按鈕會跳過當前要執(zhí)行的函數(shù)inutsAreEmpty，而不是進入該函數(shù)。同時直接跳到第19行，因為當前輸入框不為空。
這就是單步調(diào)試代碼的基本思路。如果你仔細閱讀get-started.js，會發(fā)現(xiàn)bug可能就隱藏在updateLabel函數(shù)的某個地方。除了使用單步調(diào)試以外，你還可以使用另一種斷點。
第四步：設(shè)置另一個斷點
如果你想在某一行設(shè)置斷點，可以使用行斷點(line-of-code breakpoint)。
找到updateLabel函數(shù)的最后一行，
label.textContent=addend1 + ' + ' + addend2 + '=' + sum; |
在代碼的左邊，你可以看到顯示的行號32。點擊32，開發(fā)者工具會在行號出顯示一個藍色的標記。該標記表示行斷點設(shè)置成功。代碼總會在執(zhí)行到這一行的時候中斷。
點擊第一個Resume script execution按鈕
Resume script execution button
代碼會持續(xù)執(zhí)行到第32行。
在左側(cè)，Local部分已經(jīng)將addend1，addend2和sum的值都顯示出來了。
你就會發(fā)現(xiàn)它們都是字符串，字符串相加就是將它們拼接起來，然而我們想要的是數(shù)字求和。
第五步：檢查變量值
另一個常見的情況就是變量或則函數(shù)的返回值和期望值不一樣。很多開發(fā)者都使用console.log來查看值的變化，但是使用console.log很麻煩而且非常低效。首先，你需要手動添加很多console.log，其次，在你還不清楚哪個變量會引發(fā)bug之前，你需要把很多變量值打印出來。
谷歌開發(fā)者工具一個很好的功能就是觀察表達式(Watch Expressions)，可以一直監(jiān)控變量值的變化。觀察表達式不僅可以用于觀察變量值，你可以用來監(jiān)控任意表達式。我們來試一試：
在開發(fā)者面板下的Source面板，點擊Watch,展開里面的內(nèi)容(初次展開為空)。
點擊右側(cè)的+號(Add Expression)
Add Expression button
輸入typeof sum
敲擊回車鍵。開發(fā)者面板會顯示typeof sum: "string"。
正如我們推測：sum的類型是字符串。
console.log的另一個替代品是直接使用Console。我么可以使用Console來執(zhí)行任意的JavaScript表達式。開發(fā)者通常使用Console來重寫變量值來debug。我們可以使用Console來驗證可能的解決方案。
如果Console沒有顯示出來，敲擊ESC鍵來打開。它會在開發(fā)者面板的最下方打開。
在Console中輸入parseInt(addend1) + parseInt(addend2)
敲擊回車鍵，輸出6。
第六步：修復(fù)BUG
我們已經(jīng)找到了潛在的修復(fù)方案，無需離開開發(fā)者面板，我們可以直接在開發(fā)者面板編輯源代碼。
在開發(fā)者工具的Source面板，將源代碼中var sum=addend1 + addend2替換為var sum=parseInt(addend1) + parseInt(addend2);。
保存改動(Mac: Command + S, Window, Linux: Control + S)。
點擊第五個Deactivate breakpoints按鈕
Deactivate breakpoints button
該按鈕取消所有設(shè)置的斷點。
點擊第一個Resume script execution按鈕
Resume script execution button
輸入不同的值試一試，看看是否可以正常執(zhí)行。
本文脫胎于Kayce Basques的一篇文章Get Started with Debugging JavaScript in Chrome DevTools。
原文作者：fundebug
dea 至于介紹就看官網(wǎng)就ok了，https://www.jetbrains.com/idea/download/other.html
Debug主要對應(yīng)的是橫向的一條和縱向的一條：
1、首先說第一組按鈕，共8個按鈕，從左到右依次如下：
斷點的右鍵：
查看斷點處的某個對象的值，可以:alter + click，按住alter，然后點擊想看的變量
計算表達式有兩個作用：
設(shè)置表達式的值：
在變量右鍵，set Value的值進行設(shè)置值。
方法斷點是三角形的斷點，主要的作用是，點擊F9，
哪里有異常，斷點就會停留在哪兒，比如下面的空指針異常，程序會停留在報空指針異常的代碼行中！
程序停止在拋出異常的那一行（使用這種方法尋找出現(xiàn)空指針的代碼位置是非常容易的！）
在設(shè)置復(fù)雜值的時候會看到，該值是如何變化的，就可以設(shè)置字段斷點，在寫的過程會停頓！！
在每次改變值的時候就會用到字段斷點
第一次設(shè)置的age的值是10
第二次設(shè)置的值為：20
debug的時候，i=50就直接進行停頓
希望在調(diào)試的時候能加載到變化的代碼：
avaScript 是網(wǎng)景（Netscape）公司開發(fā)的一種基于客戶端瀏覽器、面向（基于）對象、事件驅(qū)動式的網(wǎng)頁腳本語言。JavaScript語言的前身叫作Livescript。
文本編輯器
Web瀏覽器
解釋執(zhí)行（由上而下）
JavaScript1.0——JavaScript1.4
JavaScript/IE3.0、JavaScript1.2/IE4.0；
微軟允許用戶自行設(shè)置對JavaScript處理模式。
JavaScript與Java的區(qū)別體現(xiàn)在：
首先，它們是兩個公司開發(fā)的不同的兩個產(chǎn)品，Java是SUN公司推出的新一代面向?qū)ο蟮某绦蛟O(shè)計語言，特別適合于Internet應(yīng)用程序開發(fā)；而JavaScript是Netscape公司的產(chǎn)品，其目的是為了擴展Netscape Navigator功能而開發(fā)的一種可以嵌入Web頁面中的基于對象和事件驅(qū)動的解釋性語言。
其次，JavaScript是基于對象的，而Java是面向?qū)ο蟮模碕ava是一種真正的面向?qū)ο蟮恼Z言，即使是開發(fā)簡單的程序，必須設(shè)計對象。JavaScript是種腳本語言，它可以用來制作與網(wǎng)絡(luò)無關(guān)的，與用戶交互作用的復(fù)雜軟件。它是一種基于對象和事件驅(qū)動的編程語言。因而它本身提供了非常豐富的內(nèi)部對象供設(shè)計人員使用。
第三，兩種語言在其瀏覽器中所執(zhí)行的方式不一樣。Java的源代碼在傳遞到客戶端執(zhí)行之前，必須經(jīng)過編譯，因而客戶端上必須具有相應(yīng)平臺上的仿真器或解釋器，它可以通過編譯器或解釋器實現(xiàn)獨立于某個特定的平臺編譯代碼的束縛。JavaScript是一種解釋性編程語言，其源代碼在發(fā)往客戶端執(zhí)行之前不需經(jīng)過編譯，而是將文本格式的字符代碼發(fā)送給客戶，由瀏覽器解釋執(zhí)行。
第四，兩種語言所采取的變量是不一樣的。Java采用強類型變量檢查，即所有變量在編譯之前必須作聲明。JavaScript中變量聲明，采用其弱類型。即變量在使用前不需作聲明，而是解釋器在運行時檢查其數(shù)據(jù)類型。
第五，代碼格式不一樣。Java是一種與HTML無關(guān)的格式，必須通過像HTML中引用外媒體那么進行裝載，其代碼以字節(jié)代碼的形式保存在獨立的文檔中。JavaScript的代碼是一種文本字符格式，可以直接嵌入HTML文檔中，并且可動態(tài)裝載。編寫HTML文檔就像編輯文本文件一樣方便。
第六，嵌入方式不一樣。在HTML文檔中，兩種編程語言的標識不同，JavaScript使用<script>...</script>來標識，而Java使用<applet> ... </applet> 來標識。
第七，靜態(tài)綁定和動態(tài)綁定。Java采用靜態(tài)聯(lián)編，即Java的對象引用必須在編譯時的進行，以使編譯器能夠?qū)崿F(xiàn)強類型檢查，如不經(jīng)編譯則就無法實現(xiàn)對象引用的檢查。JavaScript采用動態(tài)聯(lián)編，即JavaScript的對象引用在運行時進行檢查。
如果想要更高效、更系統(tǒng)地學會javascript，最好采用邊學邊練的學習模式。
今天分享的這套JavaScript學習教程，講解了前端開發(fā)中的核心技術(shù)JavaScript，俗稱JS
內(nèi)容涵蓋：JavaScript核心語法、JavaScript內(nèi)置支持類、JavaScript調(diào)試、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的函數(shù)初步1
10. .JavaScript教程-JS的函數(shù)初步2
11. .JavaScript教程-全局變量和局部變量
12. .JavaScript教程-JS的數(shù)據(jù)類型
13. .JavaScript教程-Undefined數(shù)據(jù)類型
14. .JavaScript教程-Number數(shù)據(jù)類型
15. .JavaScript教程-Boolean數(shù)據(jù)類型
16. .JavaScript教程-回顧數(shù)據(jù)類型
17. .JavaScript教程-String數(shù)據(jù)類型
18. .JavaScript教程-Object數(shù)據(jù)類型
19. JavaScript教程-Object數(shù)據(jù)類型2
20. .JavaScript教程-Object數(shù)據(jù)類型3
21. .JavaScript教程-null undefined NaN的區(qū)別以及等同和全等運算符
22. .JavaScript教程-JS的常用事件
23. .JavaScript教程-回調(diào)函數(shù)的概念
24. .JavaScript教程-注冊事件的兩種方式
25. JavaScript教程-JS代碼的執(zhí)行順序
26. .JavaScript教程-JS代碼的執(zhí)行順序2
27. JavaScript教程-捕捉回車鍵
28. .JavaScript教程-捕捉回車鍵2
29. .JavaScript教程-void運算符
30. .JavaScript教程-JS的控制語句
31. JavaScript教程-設(shè)置和獲取文本框的value
32. JavaScript教程-innerHTML和innerText屬性
33. .JavaScript教程-正則表達式
34. .JavaScript教程-郵箱地址的正則表達式
35. JavaScript教程-擴展字符串的trim函數(shù)
36. .JavaScript教程-回顧JS
37. JavaScript教程-表單驗證
38. JavaScript教程-表單驗證2
39. JavaScript教程-表單驗證3
40. .JavaScript教程-表單驗證4
41. .JavaScript教程-復(fù)選框的全選和取消全選
42. .JavaScript教程-獲取下拉列表選中項的value
43. .JavaScript教程-周期函數(shù)setInterval
44. .JavaScript教程-內(nèi)置支持類Array
45. .JavaScript教程-BOM編程window的open和close
46. .JavaScript教程-BOM編程彈出確認框
47. .JavaScript教程-（補錄）-將當前窗口設(shè)置為頂級窗口
48. .JavaScript教程-BOM編程history和location對象
49. .JavaScript教程-JSON在開發(fā)中的使用
50. .JavaScript教程-JSON在開發(fā)中的使用2
51. JavaScript教程-JSON在開發(fā)中的使用3
52. .JavaScript教程-JSON在開發(fā)中的使用4
53. JavaScript教程-JSON在開發(fā)中的使用5
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
