Visual Studio Code - 使用 Chrome Debugging for VS Code 調試 JS

# 準備工做 1. 安裝 Debugger for Chrome 插件 2. 按 F5(或選擇菜單欄的 Debug->Start Debuging),而後選擇 Chrome,就會自動建立默認的配置文件 # 「啓動」 仍是 「附加」 - 「啓動」:配置將要調試的文件或 URL,按 F5 調試會開啓一個新的 Chrome 進程並打開該文件或 URL 進行調試 - 「附加」:而後以容許遠程調試模式打開 Chrome,配置_Chrome 打開的 tab 中的待調試 URL_爲調試地址,按 F5 鏈接上進行調試 對比一下: | 方式 | 優勢 | 缺點 | | --- | -------------------------------- | ------------------------------- | | 啓動 | 配置簡單 | 關閉調試後新開的 Chrome 進程會關閉,再次調試需從新打開 | | 附加 | 關閉調試後 Chrome 進程不會關閉,再次調試無需從新打開頁面 | 相對 「啓動」 配置複雜(須要配置 Chrome) | # 「啓動」 示例 ## 配置 launch.json 「啓動」 方式使用只需配置 launch.json 便可。 使用指定 URL 的配置要設置 webRoot。 ```json { "version": "0.1.0", "configurations": [ { "name": "Launch localhost", "type": "chrome", "request": "launch", "url": "http://localhost/mypage.html", "webRoot": "${workspaceFolder}/wwwroot" }, { "name": "Launch index.html", "type": "chrome", "request": "launch", "file": "${workspaceFolder}/index.html" }, ] } ``` # 「附加」 示例 ## 一:配置 Chrome 我用的是 Windows 配置方法以下: 1. 找到默認打開 Chrome 的快捷方式,通常是`C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Google Chrome` 2. 目標後面加上`--remote-debugging-port`配置,如:`"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222` > Windows > > - Right click the Chrome shortcut, and select properties > - In the "target" field, append --remote-debugging-port=9222 > - Or in a command prompt, execute /chrome.exe --remote-debugging-port=9222 > > macOS > > - In a terminal, execute /Applications/Google\\ Chrome.app/Contents/MacOS/Google\\ Chrome --remote-debugging-port=9222 > > Linux > > - In a terminal, launch google-chrome --remote-debugging-port=9222 ## 二:打開將要調試的地址 將調試的 tab 必須保證是由配置了`--remote-debugging-port`的 Chrome 打開的! 下面是一套 webpack 的配置: package.json ```json "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "webpack-dev-server --mode development" }, "devDependencies": { "webpack": "^4.17.1", "webpack-cli": "^3.1.0", "webpack-dev-server": "^3.1.7" } ``` webpack.config.js ```js const path = require('path'); module.exports = { entry: './src/index.js', devServer: { contentBase: './dist', port: 3000 }, devtool: process.env.NODE_ENV === 'production' ? false : 'cheap-eval-source-map', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') } }; ``` ## 三:配置 launch.json 注意: 1. 配置中的端口雖然默認就是 9222,但我測試時配置中不指定端口會報`connect ECONNREFUSED 127.0.0.1:9229`這種鏈接不上`9229`端口的錯。 2. 配置中的 URL 必定是當前要調試的 tab 的 URL(例如:配置 URL 爲`http://localhost:3000/`,在瀏覽器打開 `http://localhost:3000/` 時自動跳轉到`http://localhost:3000/index.html`,而後在 VSCode 啓動調試就會由於 URL 匹配不上就會報 \` 沒法鏈接到運行中的進程 \` 的錯誤),這也是我把配置 launch.json 放到最後一步的緣由。(PS:這種狀況也能夠經過配置 \`urlFilter\` 解決)。 ```json { // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "attach", "name": "Attach to Chrome", "url": "http://localhost:3000/", "port": 9222, "sourceMaps": true, "webRoot": "${workspaceRoot}" } ] } ``` # 參考 [Debugger for Chrome - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) # 其餘 > 16 年的時候說是打開谷歌自帶的 DevTools 這個插件的調試就會被斷掉,等等測試一下看看能同時開不。(已經解決了 \\^\_^,如今用這個插件就很是爽了)
相關文章
相關標籤/搜索