2021-04-27 09:44发布
使用VS code对JS进行Debug,需要安装一个插件,这个插件是根据你所使用的浏览器来的,不同浏览器对应插件不同,以下是插件对应情况,下载完相应的插件以后还要下载一个live server在浏览器下查看你界面运行效果,记得在到设置里修改下live server的端口号,然后调试代码,打断点运行!
浏览器 插件
Chrome Debugger for Chrome
Firefox Debugger for Firefox
Microsoft Edge Debugger for Microsoft Edge
首先准备一个test文件夹,文件夹中有test.html文件
下载vscode之后,把test文件夹在vscode编辑器中打开,最左侧的菜单选项里会有一个调试的图标,点击【运行和调试】选择【chrome】,自动生成launch.json文件
自动生成的文件配置的URL默认是localhost:8080,我是借助vscode的liveServer插件打开的test.html,所以修改一下URL
配置完成点击开始调试
调试的时候编辑器会自动切换到当前断点所在行
你可以启动谷歌控制台切换下一个断点也可以点击编辑器中的
1.检查你使用的vscode的版本是否是比较新的,我使用的是最新版本,如果不是最新版本需要在help----->check for updates一下
1.安装Debugger for Chrome插件
3.在本地创建一个目录,用来存放项目的静态文件,我这里创建的是E:\demo(这里有一个坑,如果没有创建项目的目录没办法调试)
4.使用vscode打开这个目录,并创建静态文件,我这里随便创建两个,index.html index.js ,index.html文件中引入js文件
5.配置debug方式,点击小齿轮,能自动打开launch.json配置文件,说明你的调试插件安装成功
6.配置调试配置文件,默认配置文件为如下内容
需要在后面添加如下配置信息,根据自己的实际情况配置相应的路径,下面是我的项目配置
,
{
"type": "chrome",
"request": "attach",
"name": "Attach to Chrome",
"port": 9222,
"webRoot": "${workspaceRoot}"
},
"name": "使用本机 Chrome 调试",
"request": "launch",
"file": "${workspaceRoot}/index.html",
// "url": "http://mysite.com/index.html", //使用外部服务器时,请注释掉 file, 改用 url, 并将 useBuildInServer 设置为 false "http://mysite.com/index.html
"runtimeExecutable": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe", // 改成您的 Chrome 安装路径
"sourceMaps": true,
"webRoot": "${workspaceRoot}",
// "preLaunchTask":"build",
"userDataDir":"${tmpdir}",
"port":5433
}
最终额配置结果:
7.经过如上配置完毕后,你会发现你的调试菜单里面多了一个“使用本机chrom调试”选项
8.开始打断点调试
选择使用本机Chrome调试选项,并点击左边的绿色小按钮,此时会自动打开浏览器和调试界面,此时你可以调试你的js了
总结:
如上的方式使用的是静态方式调试,没有使用http服务器,你可以看到,最后一步中打开的浏览器地址栏上的地址是真是的静态文件地址,另外,js调试能在一定程度上解决了程序员调试js的难题,当然js的调试途径不仅仅是vscode,使用chrom自带的浏览器,以及webstorm ide工具,需要学习的可以自己网上查资料学习。
console.log
在代码中 debugger
使用 chrome dev tools 打断点
1. watch 添加想要追踪的变量2. 调用堆栈3. 函数内局部变量4. 这个 js 文件内的变量5. 全局变量6. 可以把自己本地的代码文件夹添加进来,这样在 chrome dev tools 里改动的代码会同步到本地的代码
4. 使用 vscode 的扩展 debugger for chrome
接下来详细说下这个扩展的用法,装好以后就可以在 vscode 里面调试代码了。
先看下我的文件结构
点开调试的虫子,再点打开 launch.json,就能看到如下界面
我配置了两种调试方式,上面的是配合 live-server 使用,下面的是使用文件协议打开。下面的直接点调试就可以了,上面的需要先打开 live-server,然后如果和我一样目录里有好几个 html文件的话,就把 url 那一行改成相应的地址就可以了。两种调试方式都是新开一个 chrome 窗口,还有一个调试方法是使用 attach 模式,不过不建议用这个,很麻烦,需要打开 chrome 的 remote debug 模式,这里不再赘述。
attach
直接在video标签里加width和height,给固定值就好了,比如:width="1000"
向一个对象数组里面添加新的属性var arry= [{a:11,b:22,c:33,d:44},{a:11,b:0,c:0,d:44},{a:11,b:22,c:99,d:99}];var arry2=[];arry.map(((item, index)=> {arry2.push(Object.assign({},item,{mess1:item.c,mess2:item.d}))}))cons...
我觉得getTopWindow() 应该是他自己写的函数 mask 应该是getTopWindow()函数中 return 出的一个什么玩意show() jQuery的显示
如图所示
1、原型对象也是普通的对象,是对象一个自带隐式的 __proto__ 属性,原型也有可能有自己的原型,如果一个原型对象的原型不为 null 的话,我们就称之为原型链 2、 原型链是由一些用来继承和共享属性的对象组成的(有限的)对象链...
没有基础,是可以学Java的,在网上也能找到很多免费的视频、学习资料等资源,只不过想要光靠自己摸索学透Java并不容易,最好是找一个比较靠谱的有实训的培训机构。不过,我给你点建议:1.脑子里要有编程思维,2.学习态度要有,3.了解了基本概念后,从图形界面...
假设文本框的id=text1js:document.getElementById(text1).value = 测试;//即可
这两个事件都是在js原生开发时经常会用到的,比如需要对页面dom进行动态处理,这时就需要用到DOMContentLoaded和[removed]事件,大家都知道,就是在dom构建完毕后,才可以对dom元素进行操作,否则会获取不到相应的dom元素,但是DOMContentLoaded和[removed]还...
基本概念CookieCookie 是小甜饼的意思。顾名思义,cookie 确实非常小,它的大小限制为4KB左右。它的主要用途有保存登录信息,比如你登录某个网站市场可以看到记住密码,这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。localStoragelocalStor...
在vscode 头疼的问题是 用浏览器查看网页!会是以文件夹的方式打开的! 我遇到这个问题 我还重新配置了Apache ! 但是现在可以解决:使用vscode ==================== 打开cmd : 在cmd 控制台中输入 : 1.运行cnpm install live-server...
在进行对象之间的合并的时候,就会使用到extend方法进行合并语法结构:$.extend(true,{},对象1,对象2...)但是这里需要考虑一个问题,如果对象间有相同的属性名,就会涉及到哪一个对象和哪一个对象的值覆盖合并的问题,如果对象中的属性值还是一个对象的话,那...
先说下要实现什么功能,比如:限制图片大小不能超过30K,宽高为121x75上面需求提了,然后我直接把代码给你放出来,可以照着下面代码敲一遍试试就知道怎么限制图片宽高了 $(#picFile4).on(change,function(){ var imgFile = this.files[0]; va...
用python爬取近30天百度指数代码均转载,如下:#1.登录url = ‘http://index.baidu.com/’driver = webdriver.Chrome(executable_path=‘C:/Program Files(x86)/Google/Chrome/Application/chromedriver.exe’)driver.get(url)cookieList = [......
基本类型基本类型分为以下六种:string(字符串)boolean(布尔值)number(数字)symbol(符号)null(空值)undefined(未定义)注意:string 、number 、boolean 和 null undefined 这五种类型统称为原始类型(Primitive),表示不能再细分下去的基本类...
实体类中添加时间转换注解(注意时区问题)12345/** * 开始时间 */ @JsonFormat(pattern = yyyy-MM-dd HH:mm:ss, timezone=GMT+8) private Date startTime;
实例中包含加、减、乘、除四种运算,由于先乘和除的优先级别高,所以乘和除将首先被运算,接下来是加和减运算。乘和除优先级相同,所以左边的乘法将被先执行,然后是除法,接下来按从左到右的顺序进行加减运算...
最多设置5个标签!
使用VS code对JS进行Debug,需要安装一个插件,这个插件是根据你所使用的浏览器来的,不同浏览器对应插件不同,以下是插件对应情况,下载完相应的插件以后还要下载一个live server在浏览器下查看你界面运行效果,记得在到设置里修改下live server的端口号,然后调试代码,打断点运行!
浏览器 插件
Chrome Debugger for Chrome
Firefox Debugger for Firefox
Microsoft Edge Debugger for Microsoft Edge
首先准备一个test文件夹,文件夹中有test.html文件
下载vscode之后,把test文件夹在vscode编辑器中打开,最左侧的菜单选项里会有一个调试的图标,点击【运行和调试】选择【chrome】,自动生成launch.json文件
自动生成的文件配置的URL默认是localhost:8080,我是借助vscode的liveServer插件打开的test.html,所以修改一下URL
配置完成点击开始调试
调试的时候编辑器会自动切换到当前断点所在行
你可以启动谷歌控制台切换下一个断点也可以点击编辑器中的
1.检查你使用的vscode的版本是否是比较新的,我使用的是最新版本,如果不是最新版本需要在help----->check for updates一下
1.安装Debugger for Chrome插件
3.在本地创建一个目录,用来存放项目的静态文件,我这里创建的是E:\demo(这里有一个坑,如果没有创建项目的目录没办法调试)
4.使用vscode打开这个目录,并创建静态文件,我这里随便创建两个,index.html index.js ,index.html文件中引入js文件
5.配置debug方式,点击小齿轮,能自动打开launch.json配置文件,说明你的调试插件安装成功
6.配置调试配置文件,默认配置文件为如下内容
需要在后面添加如下配置信息,根据自己的实际情况配置相应的路径,下面是我的项目配置
,
{
"type": "chrome",
"request": "attach",
"name": "Attach to Chrome",
"port": 9222,
"webRoot": "${workspaceRoot}"
},
{
"name": "使用本机 Chrome 调试",
"type": "chrome",
"request": "launch",
"file": "${workspaceRoot}/index.html",
// "url": "http://mysite.com/index.html", //使用外部服务器时,请注释掉 file, 改用 url, 并将 useBuildInServer 设置为 false "http://mysite.com/index.html
"runtimeExecutable": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe", // 改成您的 Chrome 安装路径
"sourceMaps": true,
"webRoot": "${workspaceRoot}",
// "preLaunchTask":"build",
"userDataDir":"${tmpdir}",
"port":5433
}
最终额配置结果:
7.经过如上配置完毕后,你会发现你的调试菜单里面多了一个“使用本机chrom调试”选项
8.开始打断点调试
选择使用本机Chrome调试选项,并点击左边的绿色小按钮,此时会自动打开浏览器和调试界面,此时你可以调试你的js了
总结:
如上的方式使用的是静态方式调试,没有使用http服务器,你可以看到,最后一步中打开的浏览器地址栏上的地址是真是的静态文件地址,另外,js调试能在一定程度上解决了程序员调试js的难题,当然js的调试途径不仅仅是vscode,使用chrom自带的浏览器,以及webstorm ide工具,需要学习的可以自己网上查资料学习。
调试前端代码
console.log
在代码中 debugger
使用 chrome dev tools 打断点
1. watch 添加想要追踪的变量
2. 调用堆栈
3. 函数内局部变量
4. 这个 js 文件内的变量
5. 全局变量
6. 可以把自己本地的代码文件夹添加进来,这样在 chrome dev tools 里改动的代码会同步到本地的代码
4. 使用 vscode 的扩展 debugger for chrome
接下来详细说下这个扩展的用法,装好以后就可以在 vscode 里面调试代码了。
先看下我的文件结构
点开调试的虫子,再点打开 launch.json,就能看到如下界面
我配置了两种调试方式,上面的是配合 live-server 使用,下面的是使用文件协议打开。下面的直接点调试就可以了,上面的需要先打开 live-server,然后如果和我一样目录里有好几个 html文件的话,就把 url 那一行改成相应的地址就可以了。两种调试方式都是新开一个 chrome 窗口,还有一个调试方法是使用
attach
模式,不过不建议用这个,很麻烦,需要打开 chrome 的 remote debug 模式,这里不再赘述。使用VS code对JS进行Debug,需要安装一个插件,这个插件是根据你所使用的浏览器来的,不同浏览器对应插件不同,以下是插件对应情况,下载完相应的插件以后还要下载一个live server在浏览器下查看你界面运行效果,记得在到设置里修改下live server的端口号,然后调试代码,打断点运行!
直接在video标签里加width和height,给固定值就好了,比如:width="1000"
相关问题推荐
向一个对象数组里面添加新的属性var arry= [{a:11,b:22,c:33,d:44},{a:11,b:0,c:0,d:44},{a:11,b:22,c:99,d:99}];var arry2=[];arry.map(((item, index)=> {arry2.push(Object.assign({},item,{mess1:item.c,mess2:item.d}))}))cons...
我觉得getTopWindow() 应该是他自己写的函数 mask 应该是getTopWindow()函数中 return 出的一个什么玩意show() jQuery的显示
如图所示
1、原型对象也是普通的对象,是对象一个自带隐式的 __proto__ 属性,原型也有可能有自己的原型,如果一个原型对象的原型不为 null 的话,我们就称之为原型链 2、 原型链是由一些用来继承和共享属性的对象组成的(有限的)对象链...
没有基础,是可以学Java的,在网上也能找到很多免费的视频、学习资料等资源,只不过想要光靠自己摸索学透Java并不容易,最好是找一个比较靠谱的有实训的培训机构。不过,我给你点建议:1.脑子里要有编程思维,2.学习态度要有,3.了解了基本概念后,从图形界面...
假设文本框的id=text1js:document.getElementById(text1).value = 测试;//即可
这两个事件都是在js原生开发时经常会用到的,比如需要对页面dom进行动态处理,这时就需要用到DOMContentLoaded和[removed]事件,大家都知道,就是在dom构建完毕后,才可以对dom元素进行操作,否则会获取不到相应的dom元素,但是DOMContentLoaded和[removed]还...
基本概念CookieCookie 是小甜饼的意思。顾名思义,cookie 确实非常小,它的大小限制为4KB左右。它的主要用途有保存登录信息,比如你登录某个网站市场可以看到记住密码,这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。localStoragelocalStor...
在vscode 头疼的问题是 用浏览器查看网页!会是以文件夹的方式打开的! 我遇到这个问题 我还重新配置了Apache ! 但是现在可以解决:使用vscode ==================== 打开cmd : 在cmd 控制台中输入 : 1.运行cnpm install live-server...
在进行对象之间的合并的时候,就会使用到extend方法进行合并语法结构:$.extend(true,{},对象1,对象2...)但是这里需要考虑一个问题,如果对象间有相同的属性名,就会涉及到哪一个对象和哪一个对象的值覆盖合并的问题,如果对象中的属性值还是一个对象的话,那...
先说下要实现什么功能,比如:限制图片大小不能超过30K,宽高为121x75上面需求提了,然后我直接把代码给你放出来,可以照着下面代码敲一遍试试就知道怎么限制图片宽高了 $(#picFile4).on(change,function(){ var imgFile = this.files[0]; va...
用python爬取近30天百度指数代码均转载,如下:#1.登录url = ‘http://index.baidu.com/’driver = webdriver.Chrome(executable_path=‘C:/Program Files(x86)/Google/Chrome/Application/chromedriver.exe’)driver.get(url)cookieList = [......
基本类型基本类型分为以下六种:string(字符串)boolean(布尔值)number(数字)symbol(符号)null(空值)undefined(未定义)注意:string 、number 、boolean 和 null undefined 这五种类型统称为原始类型(Primitive),表示不能再细分下去的基本类...
实体类中添加时间转换注解(注意时区问题)12345/** * 开始时间 */ @JsonFormat(pattern = yyyy-MM-dd HH:mm:ss, timezone=GMT+8) private Date startTime;
实例中包含加、减、乘、除四种运算,由于先乘和除的优先级别高,所以乘和除将首先被运算,接下来是加和减运算。乘和除优先级相同,所以左边的乘法将被先执行,然后是除法,接下来按从左到右的顺序进行加减运算...