前端調試

時間 2019-11-29

標籤前端調試简体版

原文原文鏈接

github項目地址javascript

一.爲何須要調試

解決bug一般要對代碼進行調試，這樣才能比較容易的找出關鍵性問題。掌握一個好的調試技巧是一個開發人員必備的基本技能。html

二.基本調試（pc端）

這裏咱們拿一套iview-admin 的源碼來進行調試前端

1.肉眼調試

所謂肉眼調試就是指直接看代碼進行調試，這種方式效率很是低下。vue

2.console

log(...)java

查看console.log(...)打印出的日誌應該是目前大多數前端慣用的調試方法。可是這種方式對於縷清程序運行的步驟和過程來講是比較困難的。node

好比，我要查看一個函數被調用的位置，這就比較難找出。查看下面代碼webpack

咱們須要找到 updateMenulist() 被調用了幾回，在哪被調用的。固然，被調用了幾回咱們很容易查看，只須要在函數內打印一下便可。git
```
updateMenulist (state) {
  console.log("我被調用了")
}
複製代碼
```
瀏覽器控制檯中就會顯示出來github

可是咱們想知道它是在哪裏被調用的，這時咱們會想到，直接在文件夾裏搜索這個函數不就能夠了嗎，如web

搜索到的結果是有4個地方調用了這個函數，可是控制檯裏只打印了兩次，那麼，繼續往下看。
trace(...)

這個console.trace()的概述是：向Web控制檯輸出一個堆棧跟蹤。意思就是打印當前執行位置到console.trace()的路徑信息.使用console.trace()能夠打印出詳細的調用堆棧：

3.斷點調試

若是是使用webpack打包了須要將打開map模式，不然斷點斷不到具體文件。

瀏覽器中斷點

以前咱們console.log()打印的時候，後面會出現打印的具體文件位置。

點擊以後會跳到這個文件的具體位置。以後點擊我箭頭所指的位置就斷點了

以後就能夠按F5刷新斷點調試了，程序運行到這個地方會被卡住，而後你就能夠查看當前的環境中的一些信息，以下

查看調用棧

咱們能夠很明顯的查看函數第一次是在main.js的34行調用的。

而後咱們能夠按下F11或者：

因而咱們再次點擊，就又跳到了第二次執行這個函數的地方。
代碼中的斷點

有時候咱們不想用console.log()去打印而後在瀏覽器中找到文件設置斷點，那還有一種方法能夠快速的實現斷點

使用 debugger 關鍵之

在代碼中直接使用 debugger 關鍵字能夠快速的實現斷點。

效果和瀏覽器中的斷點效果是同樣的。

4.vscode 調試

使用vscode的朋友們能夠很方便的在vscode上面進行調試

配置launch.json

在項目根目錄配置.vscode文件夾。下有個launch.json文件

文件內容

{
    // 使用 IntelliSense 瞭解相關屬性。 
    // 懸停以查看現有屬性的描述。
    // 欲瞭解更多信息，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "啓動程序",
            "program": "${workspaceFolder}/HT/javascript/test.js"
        }
    ]
}
複製代碼

點擊F5或者：

關於vscode 調試的查閱 go.microsoft.com/fwlink/?lin… 通常是進行服務端後臺開發的用vscode調試的比較多。

5.chrome 插件調試

首先，下載vscode 插件

而後點擊調試按鈕

找到你的項目添加配置

如個人是MyApp，點擊添加

而後會跳到一個文件裏

將url改爲你的項目開發環境調試的地址，而後驅動項目通常的啓動命令配置都是 npm run dev，具體的啓動命令自行查看package.json文件中。

啓動完成以後按f5啓動 chorme調試，這樣就能夠在 vscode 中打斷點進行調試了。

6.vue devTools

vue devTools 使用chrome內核的瀏覽器能夠下載vue devTools拓展來調試vue單頁應用，這使得vue項目調試起來很是的方面。

安裝地址

如我寫的一個後臺管理的vue頁面。啓動項目後。

而後按f12打開開發者工具，找到咱們工具欄中的vue選項。因而乎便能清晰的看到咱們的vue組件。

二.DOM調試

1.Event Listener Breakpoints(事件監聽器斷點)

當有事件被觸發的時候，事件監聽器會斷點到具體的事件位置。

例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
    <div id="cli">測試點擊</div>
</body>

<script> var cli = document.querySelector("#cli"); cli.addEventListener("click", function(){ console.log("點擊了") }) </script>

</html>
複製代碼

在瀏覽器中打開文件，而後按f12找到sources選項卡，好比我要監聽點擊事件。選擇mouse將click打上鉤。

而後咱們測試點擊事件。即可以發現事件被攔截了。

2.Dom breakpoints

subtree modifications : 當子節點發生變化的時候發生斷點
attribute modifications : 當屬性發生變法的時候觸發斷點
node removal : 當元素被移除的時候發生斷點

此處我舉個node removal的例子

當咱們點擊測試點擊的時候，會將一個DOM給刪除。因而會在刪除的代碼中實現斷點

三.ajax請求調試

1.XHR Breakpoints

注：此小結從別人文章中摘要。

這幾年前端開發發生了翻天覆地的變化，從當初的名不見經傳到現在的盛極一時，Ajax驅動Web富應用，移動WebApp單頁應用風生水起。這一切都離不開XMLHttpRequest對象，而「XHR Breakpoints」正是專爲異步而生的斷點調試功能。

咱們能夠經過「XHR Breakpoints」右側的「+」號爲異步斷點添加斷點條件，當異步請求觸發時的URL知足此條件，JS邏輯則會自動產生斷點。演示動畫中並無演示到斷點位置，這是由於，演示使用的是jQuery封裝好的ajax方法，代碼已通過壓縮，看不到什麼效果，而事實上XHR斷點的產生位置是」xhr.send()」語句。

XHR斷點的強大之處是能夠自定義斷點規則，這就意味着咱們能夠針對某一批、某一個，乃至全部異步請求進行斷點設置，很是強大。可是，彷佛這個功能在平常開發中用得並很少，至少我用得很少。想一想緣由大概有兩點：其一，這類型的斷點調試需求在平常業務中自己涉及很少；其二，現階段的前端開發大多基於JS框架進行，最基本的jQuery也已經對Ajax進行了良好封裝，極少有人本身封裝Ajax方法，而項目爲了減小代碼體積，一般選擇壓縮後的代碼庫，使得XHR斷點跟蹤相對不那麼容易了。