[英]Launching Chrome and debugging from within Visual Studio Code
I am using Visual Studio Code to debug some front-end javascript (for a Wordpress plugin). 我正在使用Visual Studio Code来调试一些前端javascript(用于Wordpress插件)。 I am having trouble configuring the launch.json file correctly.
我无法正确配置launch.json文件。
I can launch chrome manually and then attach to it after the fact (using an Attach request), in which case javascript breakpoints work fine fine. 我可以手动启动chrome,然后在事后(使用Attach请求)附加到它,在这种情况下javascript断点工作正常。
If I launch chrome from within vscode (using the Launch request), it does connect (I see console output) but I don't get my breakpoints firing. 如果我从vscode中启动chrome(使用Launch请求),它会连接(我看到控制台输出),但是我没有触发断点。 I assume there is some setting incorrect in my launch.json file.
我假设我的launch.json文件中有一些设置不正确。
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Signup Form",
"type": "chrome",
"request": "launch",
"url": "http://myclient.dev/signup-form",
"sourceMaps": true,
"webRoot": "../../..",
"runtimeArgs": [
"--remote-debugging-port=9222"
]
},
{
"name": "Attach",
"type": "chrome",
"request": "attach",
"port": 9222
}
]
} }
I've tried whatever I could think of for web root (including the full local path to the web root at 'htdocs' and the relative path you see above. It doesn't seem to care what I put in there, so maybe I'm barking up the wrong tree. 我已经尝试过任何我能想到的web根目录(包括'htdocs'的web根目录的完整本地路径以及你在上面看到的相对路径。它似乎并不关心我放在那里,所以也许我我正在吠叫错误的树。
The local project folder is here: 本地项目文件夹在这里:
/home/me/code/vagrant-local/www/wordpress-myclient/htdocs/wp-content/plugins/cee-signup-form
On the server, that maps to: 在服务器上,映射到:
http://myclient.dev/wp-content/plugins/cee-signup-form
In the page 'signup-form' I include the javascript file in question, using its full url. 在“注册表单”页面中,我使用其完整网址包含相关的javascript文件。
Obviously, I can manually go the url and then attach every time I want to debug, but having a one-click launch and debug would be far superior. 显然,我可以手动转到url,然后每次我想调试时附加,但只需单击启动和调试就可以了。
What am I doing wrong? 我究竟做错了什么?
Please follow below steps: 请按照以下步骤操作:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Node",
"port": 9229,
"protocol": "inspector",
"runtimeExecutable": "npm",
"runtimeArgs": ["run-script", "start"],
"console": "integratedTerminal"
},
{
"type": "chrome",
"request": "launch",
"name": "Chrome",
"url": "http://localhost:3000",
"webRoot": "${workspaceRoot}/client/src"
}
],
"compounds": [
{
"name": "Full-stack",
"configurations": ["Node", "Chrome"]
}
]
}
Go to the Debug mode in VS Code and start with 'Full-stack'. 转到VS Code中的Debug模式并以'Full-stack'开头。
Start npm 从npm开始
Refer this : https://github.com/auchenberg/timey 请参阅: https : //github.com/auchenberg/timey
In my case, on Ubuntu 14.04, it worked after having added 在我的例子中,在Ubuntu 14.04上,它在添加后工作
"runtimeExecutable": "/usr/bin/chromium-browser"
I have however to start chrome in advance. 但是我要提前开始镀铬。
It turns out that it was a bug in VSCode, and it is fixed in the latest version (1.2.1). 事实证明,它是VSCode中的一个错误,并在最新版本(1.2.1)中得到修复。 After updating, I had to do three things.
更新后,我不得不做三件事。
Update the Chrome Extension 更新Chrome扩展程序
In VSCode, hit CTRL+P to bring up the Command Palette, then: 在VSCode中,按CTRL + P调出命令调色板,然后:
Extensions: Show Outdated Extensions
At this point it will let you update them. 此时它会让你更新它们。 Learn more here: https://code.visualstudio.com/Docs/editor/extension-gallery#_update-an-extension
在此处了解更多信息: https : //code.visualstudio.com/Docs/editor/extension-gallery#_update-an-extension
Edit the launch config 编辑启动配置
They now require absolute paths for the web root. 他们现在需要Web根的绝对路径。 So, I had to change the
webRoot
property of the launch.json
file to explicitly include the workspace root. 因此,我必须更改
launch.json
文件的webRoot
属性以显式包含工作空间根目录。
"webRoot": "${workspaceRoot}/../../..",
Close all copies of Chrome before debugging 在调试之前关闭所有Chrome副本
This is annoying. 这很烦人。 But it works.
但它的确有效。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.