Visual Studio Code 斷點調試 Vue

qpwoeiru96 發布于2019-08-22 14:51 / 1064人閱讀

摘要：個人還是更加習慣于斷點調試。這篇文章將介紹如何配置和來完成直接在斷點調試代碼并且在的調試窗口看到中相同的值。現在就可以在文件的代碼中打斷點進行調試了。

很多人習慣在 Chrome 的調試窗口中調試 Vue 代碼， 或者直接使用 console.log 來觀察變量值， 這是非常痛苦的一件事，需要同時打開至少 3 個窗體。個人還是更加習慣于斷點調試。這篇文章將介紹如何配置 Visual Studio Code 和 Chrome 來完成直接在 VS Code 斷點調試代碼, 并且在VS Code的調試窗口看到Chrome中console相同的值。

設置 Chrome 遠程調試端口

首先我們需要在遠程調試打開的狀態下啟動 Chrome, 這樣 VS Code 才能 attach 到 Chrome 上:

Windows

右鍵點擊 Chrome 的快捷方式圖標，選擇屬性

在目標一欄，最后加上--remote-debugging-port=9222 注意要用空格隔開

macOS

打開控制臺執行：

/Applications/Google Chrome.app/Contents/MacOS/Google Chrome --remote-debugging-port=9222

Linux

打開控制臺執行：

google-chrome --remote-debugging-port=9222

Visual Stuido Code 安裝插件

點擊 Visual Studio Code 左側邊欄的擴展按鈕，然后在搜索框輸入Debugger for Chrome并安裝插件，再輸入，安裝完成后點擊 reload 重啟 VS Code

添加 Visual Studio Code 配置

點擊 Visual Studio Code 左側邊欄的調試按鈕，在彈出的調試配置窗口中點擊設置小齒輪，然后選擇 chrome, VS Code 將會在工作區根目錄生成.vscode 目錄，里面會有一個 lanch.json 文件并會自動打開

用下面的配置文件覆蓋自動生成的 lanch.json 文件內容。

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "attach",
      "name": "Attach to Chrome",
      "port": 9222,
      "webRoot": "${workspaceRoot}/src",
      "url": "http://localhost:8080/#/",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

修改 webpack 的 sourcemap

如果你是基于 webpack 打包的 vue 項目，可能會存在斷點不匹配的問題, 還需要做些修改：

打開根目錄下的 config 目錄下的 index.js 文件

將dev 節點下的 devtool 值改為 "eval-source-map"

將dev節點下的 cacheBusting 值改為 false

開始調試吧

一切具備了，現在驗收成果了

通過第一步的方式以遠程調試打開的方式打開 Chrome

在 vue 項目中執行npm run dev以調試方式啟動項目

點擊 VS Code 左側邊欄的調試按鈕，選擇 Attach to Chrome 并點擊綠色開始按鈕，正常情況下就會出現調試控制條。

現在就可以在.vue文件的js代碼中打斷點進行調試了。

前往我的技術小站 https://www.bbwho.com 查看更多博客。

GPU云服務器云服務器 Visual Studio Code visual-studio-code visual studio調試異常 visual studio調試iis

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92931.html

使用Visual Studio Code對Node.js進行斷點調試

摘要：在開發的過程中，幾乎不可能一次性就能寫出毫無破綻的程序，斷點調試代碼是一個普遍的需求。作為前端開發工程師，以往我們開發的程序都運行在瀏覽器端，利用提供的開發者工具就可以方便的進行源碼斷點調試。這幾個都是常見的斷點調試指令。在開發的過程中，幾乎不可能一次性就能寫出毫無破綻的程序，斷點調試代碼是一個普遍的需求。作為前端開發工程師，以往我們開發的JavaScript程序都運行在瀏覽器端，...

gityuan 2019-08-20 15:49 評論0 收藏0
Visual Studio Code前端開發使用之旅

摘要：更好的斷點控制啟用禁用重新啟用可以在調試視圖中的斷點區域設置。編輯器邊距中的斷點一般用紅色的實心圓表示。前端開發必備插件功能性插件匹配標簽，關閉對應的標簽。這可以使得團隊內的書寫更為規范且具有一致性。 Visual Studio Code是個現下比較流行的編輯器，啟動非常快，完全可以用來代替其他文本文件編輯工具。又可以用來做開發，支持各種語言，相比其他IDE，輕量級完全可配置還集成Gi...

stormjun 2019-08-21 18:46 評論0 收藏0
Visual Studio Code 前端調試不完全指南

摘要：接下來的內容將從以下幾方面進行展開調試前端代碼調試通過啟動的服務器要使用的調試功能，首先就得配置文件。調試前端代碼通過調試前端代碼主要依賴于一個插件，該插件主要利用所開放出來的接口來實現對其渲染的頁面進行調試。本文最初發布于我的個人博客：咀嚼之味 Visual Studio Code (以下簡稱 vscode) 如今已經代替 Sublime，成為前端工程師們最喜愛的代碼編輯器。它作為...

dongfangyiyu 2019-08-20 16:44 評論0 收藏0
使用Visual Studio Code編寫調試Python Flask程序

摘要：最近由于工作關系，開始寫程序，同事有用的，有用的。第一種適合及以上版本，因為在版本起，出現了文件，配置可以寫成用文件啟動程序，實測可以觸發斷點。最近由于工作關系，開始寫flask web程序，同事有用Vim的，有用PyCharm的。在調研了一通python的編輯器，IDE之后，發現Visual Studio Code相對比較適合我。 VSC有相對較全的功能，比較好看舒服的主題，良好的...

gotham 2019-07-31 12:23 評論0 收藏0
Visual Studio Code調試PHP

摘要：和，這兩個配置文檔中說的是設置為。主要感慨就是，文檔一定要找到官方文檔，然后提高英語閱讀水平，隨后再加上多多嘗試即可。本人微信公眾號：前端修煉之路，歡迎關注。 showImg(https://segmentfault.com/img/remote/1460000019475554?w=443&h=253); 這兩天有點時間，花時間學習了一下PHP基礎語法和語句。因為個人比較喜歡Vis...

canger 2019-07-01 13:59 評論0 收藏0