blocks|key|4490634|text|VSCode将使用node启动您的应用程序，这意味着您的应用程序正在某个端口上运行。你可以通过访问http://localhost:PORT/来与你的应用程序交互，如果你在app.js中设置了一个断点，那么一旦你访问了运行在本地via节点的站点，它就会被击中。这是一个很好的演示https://channel9.msdn.com/Blogs/cloud-with-a-silver-lining/hello-visual-studio-code-nodejs|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4490635|entityMap|0|LINK|mutability|MUTABLE|url|http://localhost:PORT/|1|https://channel9.msdn.com/Blogs/cloud-with-a-silver-lining/hello-visual-studio-code-nodejs^0|1D|M|0|3V|2I|1|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]|$A|R|B|S|1|T]]|C|$]]|$1|D|3|-4|5|6|7|U|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]|L|$5|G|H|I|C|$J|M]]]]

VSCode will use node to launch your app, which means your app is running on some PORT. You can interact with your app by visiting <a href="http://localhost:PORT/" rel="nofollow">http://localhost:PORT/</a>
If you set a breakpoint in app.js it should be hit once you visit your site that is running local via node.
Here is a nice demo <a href="https://channel9.msdn.com/Blogs/cloud-with-a-silver-lining/hello-visual-studio-code-nodejs" rel="nofollow">https://channel9.msdn.com/Blogs/cloud-with-a-silver-lining/hello-visual-studio-code-nodejs</a>

blocks|key|4490679|text|现在可以通过Chrome远程调试和微软发布的扩展在vscode中调试Chrome网页。Debugger+for+Chrome|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4490680|从该页面可以看到，有两种调试模式:启动模式和附加模式。我只能设法使用附加模式，可能是因为我没有运行服务器。这个扩展具有所有重要的调试工具的功能:局部变量、断点、控制台、调用堆栈。|4490681|重新访问vscode的另一个原因是，它现在支持ECMAScript+6的IntelliSense，它显示了我尝试过的其他“类似IntelliSense”的解决方案中看不到的方法，比如SublimeCodeIntel或最新版本的WebStorm。|4490682|entityMap|0|LINK|mutability|MUTABLE|url|https://marketplace.visualstudio.com/items/msjsdiag.debugger-for-chrome^0|17|J|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]]]

It is now possible to debug Chrome web pages in vscode via Chrome remote debugging with a extension released by Microsoft.
<a href="https://marketplace.visualstudio.com/items/msjsdiag.debugger-for-chrome">Debugger for Chrome</a>

As you can see from that page there are two modes of debugging, Launch and Attach. I only managed to use the Attach mode, probably because i don't have a server running. This extension has all important debug tools functional: local variables, breakpoints, console, call stack.

Another reason to revisit vscode is that it now has IntelliSense support for ECMAScript 6, which displays methods not visible in other "IntelliSense like" solutions I've tried, like SublimeCodeIntel or the latest version of WebStorm.

blocks|key|4489723|text|您可以使用https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4489724|在launch.json中，您只需输入您正在使用的服务器的url值，然后就可以使用编辑器(+visual+studio+)代码来调试您的html+%2B+js了。|4489725|{
++++"version":+"0.2.0",
++++"configurations":+[
++++++++{
++++++++++++"type":+"chrome",
++++++++++++"request":+"launch",
++++++++++++"name":+"Launch+Chrome+against+localhost",
++++++++++++"url":+"http://127.0.0.1:8081",
++++++++++++"webRoot":+"${workspaceFolder}"
++++++++}
++++]
}|code-block|syntax|javascript|4489726|entityMap|0|LINK|mutability|MUTABLE|url|https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome^0|5|28|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

You can use <a href="https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome" rel="nofollow noreferrer">https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome</a> 

In the launch.json you just have to pu the url value of the server that you are using and then you can debug your html + js with your editor visual studio code

<pre><code>{
 "version": "0.2.0",
 "configurations": [
 {
 "type": "chrome",
 "request": "launch",
 "name": "Launch Chrome against localhost",
 "url": "http://127.0.0.1:8081",
 "webRoot": "${workspaceFolder}"
 }
 ]
}
</code></pre>

blocks|key|4489773|text|我不想仅仅为了一些超文本标记语言和JavaScript+(不像一个类似的例子)而运行服务器(与类似的例子不同)这个VS代码启动配置和'Debugger+for+Chrome‘扩展在我的Windows10机器上做到了：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4489774|++{
+++++"version":+"0.2.0",
++++++++"configurations":+[
++++++++++++{
++++++++++++++++"name":+"Launch+HTML+file",
++++++++++++++++"type":+"chrome",
++++++++++++++++"request":+"launch",
++++++++++++++++"file":+"${file}"
++++++++++++}
++++++++]
++++}|code-block|syntax|javascript|4489775|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I didn't want to run a server just for some HTML and JavaScript (unlike a similar example) this VS Code launch configuration along with the 'Debugger for Chrome' extension did the trick on my Windows 10 machine:

<pre><code> {
 "version": "0.2.0",
 "configurations": [
 {
 "name": "Launch HTML file",
 "type": "chrome",
 "request": "launch",
 "file": "${file}"
 }
 ]
 }
</code></pre>

blocks|key|4490806|text|如果像C:\C#\mypage.htm这样的路径中有#，你可以使用FF+&+ex。fileBasename或Similar+variable+-在Chrome中不起作用：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4490807|.vscode\launch.json
{
++++"version":+"0.2.0",
++++"configurations":+[
++++++++{
++++++++++++"name":+"Launch+HTML+file",
++++++++++++"type":+"firefox",
++++++++++++"request":+"launch",
++++++++++++"file":+"C:/C%2523/${fileBasename}"
+++++++++}
++++]
}|code-block|syntax|javascript|4490808|或使用node.js测试的简单完整路径：|4490809|{
++++"version":+"0.2.0",
++++"configurations":+[
++++++++{
++++++++++++"type":+"node",
++++++++++++"request":+"launch",
++++++++++++"name":+"Launch+Program",
++++++++++++"program":+"${workspaceFolder}/${fileBasename}"
++++++++}
++++]
}|4490810|entityMap|0|LINK|mutability|MUTABLE|url|https://code.visualstudio.com/docs/editor/variables-reference^0|1I|G|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

In case you have # in path like C:\C#\mypage.htm, you may use FF &amp; ex. fileBasename or <a href="https://code.visualstudio.com/docs/editor/variables-reference" rel="nofollow noreferrer">Similar variable</a> - does not work in Chrome:

<pre><code>.vscode\launch.json
{
 "version": "0.2.0",
 "configurations": [
 {
 "name": "Launch HTML file",
 "type": "firefox",
 "request": "launch",
 "file": "C:/C%23/${fileBasename}"
 }
 ]
}
</code></pre>

Or simple full path tested with node.js:

<pre><code>{
 "version": "0.2.0",
 "configurations": [
 {
 "type": "node",
 "request": "launch",
 "name": "Launch Program",
 "program": "${workspaceFolder}/${fileBasename}"
 }
 ]
}
</code></pre>

I want to run and debug an html page with a javascript file in a mini website when I hit F5.
How do I configure VSCode to open the html page in the browser and then allow me to set breakpoints in the javescript file which will be triggered by my interaction with the app in the browser?
In Visual Studio this would &quot;just work&quot;, because it fires up its own web server, IIS Express. In VSCode I'm not sure how I set up launch.json and/or tasks.json to create a simple node.js web server and serve index.html.
I have seen some examples of debugging javascript apps, for example this launch.json:
<pre><code>{
 &quot;version&quot;: &quot;0.1.0&quot;,
 &quot;configurations&quot;: [
 {
 &quot;name&quot;: &quot;Launch Bjarte's app&quot;,
 &quot;type&quot;: &quot;node&quot;,
 &quot;program&quot;: &quot;app.js&quot;,
 &quot;stopOnEntry&quot;: true,
 &quot;args&quot;: [],
 &quot;cwd&quot;: &quot;.&quot;,
 &quot;runtimeExecutable&quot;: null,
 &quot;runtimeArguments&quot;: [],
 &quot;env&quot;: {},
 &quot;sourceMaps&quot;: false
 },
 {
 &quot;name&quot;: &quot;Attach&quot;,
 &quot;type&quot;: &quot;node&quot;,
 &quot;address&quot;: &quot;localhost&quot;,
 &quot;port&quot;: 5858,
 &quot;sourceMaps&quot;: false
 }
 ]
}
</code></pre>
This will run the js file, but I don't understand how I can interact with the app.

How do I debug HTML and JavaScript together in VSCode (Visual Studio Code)?

Visual Studio

远程调试

服务器

WebStorm

当我点击F5时，我想在迷你网站上运行和调试一个带有javascript文件的html页面。如何配置VSCode在浏览器中打开html页面，然后允许我在javescript文件中设置断点，这些断点将由我在浏览器中与应用程序的交互触发？在Visual Studio中，这将“正常工作”，因为它会启动自己的web服务器IIS ...

问如何在VSCode (Visual Studio Code)中同时调试HTML和JavaScript？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在VSCode (Visual Studio Code)中同时调试HTML和JavaScript？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在VSCode (Visual Studio Code)中同时调试HTML和JavaScript？
EN