手机版
你好,游客 登录 注册 搜索
背景:
阅读新闻

VS Code - Debugger for Chrome调试JavaScript的两种方式

[日期:2016-08-29] 来源:Linux社区  作者:SolidMango [字体: ]

一直想写一篇VS Code - Debugger for Chrome相关的文章,没想到一直拖到了今天。VS Code 开源以后确实在社区得到了很多人的支持,当中很多优点想必不用我多说,今天讨论的主题是Debugger for Chrome这个插件的使用。在网上简单找了一下,没有找到这个主题讲的特别好的文章,于是笔者写了这篇文章。

说实话,看了如下这篇文章,对于如何上手可能很多人还是一知半解,觉得说的不够透彻,因为关于如何new instance和attach,这篇文章写得不够透彻,也不够详细。

https://code.visualstudio.com/blogs/2016/02/23/introducing-chrome-debugger-for-vs-code

下面我们来简单分析一下VS Code - Debugger for Chrome调试JavaScript的两种方式的要点

1. 首先是要有一个.vscode/launch.json文件,这个文件需要建在源码文件夹下,其中.vscode是个目录,launch.json是一个调试用的文件,调试器靠他来new instance和attach,示例如下,前半部分配置用于new instance方式的调试,后半部分的配置用于attach方式调试。

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome and new instance of Chrome",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:8080/Test/index.html",
            "sourceMaps": true,
            "webRoot": "E:/apache-tomcat-8.0.21/webapps/Test"
        },
        {
            "name": "Attach to Chrome",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}"
        }
    ]
}

2. 对于url方式的调试需要web server支持,否则会有网络连接问题,对于本机attach的方式Chrome的启动需要启动参数,比如:

”--remote-debugging-port=9222”

3. 不论attach 还是 new chrome instance都需要通过webroot参数指定源文件的路径,这一点从体验上完败给直接的浏览器调试,因为直接的浏览器调试不需要这个配置也能调试,打断点,如果调试者本身没有源代码更麻烦。

总结

本文对VS Code - Debugger for Chrome的两种调试方式和要点进行了详细的分析,希望对大家有所帮助。

最后分享一下代码调试时的截图,有图有真相。

Ubuntu 14.04 安装Visual Studio Code  http://www.linuxidc.com/Linux/2016-03/129052.htm

使用Visual Studio Code开发TypeScript  http://www.linuxidc.com/Linux/2015-07/119456.htm

Visual Studio Code 简单试用体验  http://www.linuxidc.com/Linux/2015-05/116887.htm

Visual Studio Code试用体验  http://www.linuxidc.com/Linux/2015-07/120378.htm

Visual Studio 2010 & Help Library Manager 安装说明 http://www.linuxidc.com/Linux/2012-11/74814.htm

OpenCV 2.3.x/2.4.x在Visual Studio 2005/2008和Visual Studio 2010配置方法详解 http://www.linuxidc.com/Linux/2012-08/68302.htm

使用OpenCV-2.4.0.exe文件编译x86或x64平台Visual Studio 2005/2008/2010目标文件 http://www.linuxidc.com/Linux/2012-08/68305.htm

Visual Studio LightSwitch增加对HTML5和JavaScript的支持 http://www.linuxidc.com/Linux/2012-06/63397.htm

Visual Studio 11:使用 C++ 开发一个最简单的 Metro 应用 http://www.linuxidc.com/Linux/2012-06/62657.htm

Ubuntu 14.04如何安装Visual studio Code  http://www.linuxidc.com/Linux/2016-07/132886.htm

Visual Studio 的详细介绍请点这里
Visual Studio 的下载地址请点这里

本文永久更新链接地址http://www.linuxidc.com/Linux/2016-08/134699.htm

linux
相关资讯       VS Code  JavaScript调试 
本文评论   查看全部评论 (1)
表情: 表情 姓名: 字数

       

评论声明
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款
第 1 楼
* 匿名 发表于 2017/7/28 15:49:57
mac vscode 如何配置