Visual Studio Code-使用Chrome Debugging for VS Code調試JS
阿新 • • 發佈：2018-11-24
mat require port ech int path hover esc info
準備工作
- 安裝Debugger for Chrome插件
- 按F5（或選擇菜單欄的Debug->Start Debuging），然後選擇Chrome，就會自動創建默認的配置文件
“啟動”還是“附加”
- “啟動”：配置將要調試的文件或url，按F5調試會開啟一個新的Chrome進程並打開該文件或url進行調試
- “附加”：然後以允許遠程調試模式打開Chrome，配置Chrome打開的tab中的待調試url為調試地址，按F5連接上進行調試
對比一下：
| 方式 | 優點 | 缺點 |
|---|---|---|
| 啟動 | 配置簡單 | 關閉調試後新開的Chrome進程會關閉，再次調試需重新打開 |
| 附加 | 關閉調試後Chrome進程不會關閉，再次調試無需重新打開頁面 | 相對“啟動”配置復雜（需要配置Chrome） |
“啟動”示例
配置launch.json
“啟動”方式使用只需配置launch.json即可。
使用指定url的配置要設置webRoot。
{ "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配置方法如下：
- 找到默認打開Chrome的快捷方式，一般是
C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Google Chrome - 目標後面加上
--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
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
"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
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
註意：
- 配置中的端口雖然默認就是9222，但我測試時配置中不指定端口會報
connect ECONNREFUSED 127.0.0.1:9229這種連接不上其他的端口的錯 - 配置中的url一定是當前要調試的tab的url（例如：配置url為http://localhost:3000/，但瀏覽器打開http://localhost:3000/時自動跳轉到http://localhost:3000/index.html，這時按F5調試就會報
無法連接到運行中的進程的錯誤），這也是我把配置launch.json放到最後一步的原因。（PS：這種情況也可以通過配置urlFilter解決）
{
// 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",
"url": "http://localhost:3000/",
"port": 9222,
"sourceMaps": true,
"webRoot": "${workspaceRoot}"
}
]
}
參考
Debugger for Chrome - Visual Studio Marketplace
其他
https://code.visualstudio.com/blogs/2016/02/23/introducing-chrome-debugger-for-vs-code
16年的時候說是打開谷歌自帶的DevTools 這個插件的調試就會被斷掉，等等測試一下看看能同時開不。（已經解決了^_^，現在用這個插件就非常爽了）
Visual Studio Code-使用Chrome Debugging for VS Code調試JS