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": ,
"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的两种方式的更多相关文章

  1. VSCode调试Html中的脚本 vscode前端常用插件推荐,搭建JQuery、Vue等开发环境 vsCode 添加浏览器调试和js调试的方法总结 VS Code - Debugger for Chrome调试js

    一.背景 使用Visual Studio Code写了一个简单的Html页面,想调试下其中script标签里的javascript代码,网上查了一通,基本都是复制粘贴或者大同小异的文章,就是要安装De ...

  2. 设置Mybatis打印调试sql的两种方式

    http://blog.csdn.net/gao36951/article/details/53641432 ********************************************* ...

  3. VS Code - Debugger for Chrome调试js

    最近在自学一些s的内容,用到了vscode来编写代码,一直没有使用过vs调试js的代码,看到左侧有推荐一个插件Debugger for Chrome使用来调试js代码的,对于vs这种开源,需要安装各种 ...

  4. 使用VSCode调试Javascript的三种方式

    Code Runner 在应用商店中搜索Code Runner插件进行安装. 选中你要执行的Javascript脚本,右键选择Run Code,利用Console.log在下方的输出窗口里可以看到输出 ...

  5. chrome 全屏 的两种方式

    新建脚本start.bat 自动全屏模式 "C:\Program Files\Google\Chrome\Application\chrome.exe" --kiosk http: ...

  6. javascript实例:两种方式实现tab栏选项卡

    方法1: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  7. svg中实现文字随曲线走向,HTML直接写和JavaScript创建对象两种方式

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=&qu ...

  8. VS Code - Debugger for Chrome

    VS Code - Debugger for Chrome调试JavaScript的两种方式   VS Code - Debugger for Chrome调试JavaScript的两种方式 最近由于 ...

  9. 利用chrome调试JavaScript代码

    看见网上很多人问怎么用chrome调试JavaScript代码,我也对这个问题抱着疑问,但是没有找到一篇能用的中文文章(可能我的google有问题),也不知道怎么点出一篇E文的,感觉作者写得不错,所以 ...

随机推荐

  1. redis主从复制配置

    master配置 主要是下面配置 # ~~~ WARNING ~~~ If the computer running Redis is directly exposed to the # intern ...

  2. js中的时间与毫秒数互相转换

    1.js毫秒时间转换成日期时间 var oldTime = (new Date("2012/12/25 20:11:11")).getTime(); //得到毫秒数     //不 ...

  3. JQuery中的dialog使用介绍

    初始化参数 对于 dialog 来说,首先需要进行初始化,在调用 dialog 函数的时候,如果没有传递参数,或者传递了一个对象,那么就表示在初始化一个对话框. 没有参数,表示按照默认的设置初始化对话 ...

  4. c++ eof()函数

    C++ eof()函数可以帮助我们用来判断文件是否为空,抑或是判断其是否读到文件结尾.在这里我们将会对其进行详细的介绍. C++编程语言中的很多功能在我们的实际应用中起着非常大的作用.比如在对文件文本 ...

  5. mongodb搭建和基本语法

    下载安装包 https://fastdl.mongodb.org/win32/mongodb-win32-x86_64-2008plus-ssl-3.0.0-signed.msi?_ga=1.2206 ...

  6. [转]Android通过NDK调用JNI,使用opencv做本地c++代码开发配置方法

    原文地址:http://blog.csdn.net/watkinsong/article/details/9849973 有一种方式不需要自己配置所有的Sun JDK, Android SDK以及ND ...

  7. CYQ.Data 快速开发EasyUI

    EasyUI: 前端UI框架之一, 相对ExtJs来说,算是小了,这两天,抽空看了下EasyUI的相关知识,基本上可以和大伙分享一下: 官网: http://www.jeasyui.com/ 学习的话 ...

  8. iOS7的启动画面设置及asset catalogs简介

    如果上网搜索一下“iOS App图标设置”或者“iOS App启动画面设置”肯定能找到不少文章,但内容大多雷同,就是让你按照某种尺寸制作若干张png图片,再按照苹果的命名规范,加入到项目中去,一行代码 ...

  9. 常用网络工具 ipconfig arp traceroute

    如今的计算机是离不开网络的计算机了,因而我们对网络要有一基础的认识.连不上网,程序运行不正常之类的,多少都与网络有关.本文将介绍常用的工具. 网络出问题 ipconfig ping 网络连不上,首先要 ...

  10. Sql Server数据库备份和恢复:原理篇

    本文与您探讨为什么Sql Server有完整备份.差异备份和事务日志备份三种备份方式,以及为什么数据库又有简单模式.完整模式和大容量日志模式这三种恢复模式.本文内容适用于2005以上所有版本的Sql ...