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

最近由于出差的缘故，博客写的不是很多，一直想写一篇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的两种调试方式和要点进行了详细的分析，希望对大家有所帮助。

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

VS Code - Debugger for Chrome调试JavaScript的两种方式相关推荐

Mybatis打印调试sql的两种方式
问题描述在使用mybatis进行开发的时候,由于可以动态拼接sql,这样大大方便了我们.但是也有一定的问题,当我们动态sql拼接的块很多的时候,我们要想从*mapper.xml中直接找出完整的sql ...
JavaWeb 在html中引入javascript的两种方式
通过 script标签来引入javascript 第一种在head中直接引入javascript <!DOCTYPE html> <html lang="en" ...
VSCode调试代码的三种方式
VSCode调试代码的三种方式一.配置auto-attach(影响全局的终端) 在vscode的终端里运行node时,根据不同的选项,自动判断是否启动debug模式. ctrl + shift + ...
Code First02---CodeFirst配置实体与数据库映射的两种方式
Code First有两种配置数据库映射的方式,一种是使用数据属性DataAnnotation,另一种是Fluent API. 这两种方式分别是什么呢?下面进行一一解释: DataAnnotation ...
javascript消除字符串两边空格的两种方式，面向对象和函数式编程。python oop在调用时候的优点...
主要是javascript中消除字符串空格,比较两种方式的不同 //面向对象,消除字符串两边空格 String.prototype.trim = function() { return this.re ...
jquery、javascript实现(get、post两种方式)跨域解决方法
jquery.javascript实现(get.post两种方式)跨域解决方法一.实现get方式跨域请求数据浏览器端 <script> $(document).ready(fun ...
JavaScript概述和HTML中嵌入JavaScript的三种方式
"成功没有捷径,脚踏实地一步一个脚印,该来的总会来,不好高骛远,不急功近利,付出总会有回报,不管处于哪个阶段,都要一步一个脚印,踏实的走好每一步!" 目录 01.JavaScrip ...
小白编程笔记——JavaScript中两种把表单内容传递给Controller的方法
工作的时候看到有两种把页面上内容传递给Controller的方法,其中一种是传递对数据库的搜索条件,并且会根据搜索条件访问数据库,并将更新后的数据写在JqGrid表格里.另一种则是用于为数据库新增数据 ...
Android Studio无线Wifi调试手机的两种方案
Android Studio无线Wifi调试手机的两种方案第一种方式使用adbWireless连接第二种方式使用插件Android Wifi ADB连接总结第一种方式使用adbWirel ...

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

VS Code - Debugger for Chrome调试JavaScript的两种方式相关推荐

最新文章

热门文章