chrome浏览器设置网页(Chrome浏览器调试技巧)

1、谷歌浏览器调试界面友好,性能强大,下面简单介绍开发者工具的几个超级使用的调试技巧。

2、Ctrl P快速搜寻文件

当DevTools被打开的时候,按Ctrl P,就能快速搜寻和打开你项目的文件。

3、Ctrl Shift F搜索一个特定的字符串

如果你希望在源代码中搜索要怎么办呢?在页面已经加载的文件中搜寻一个特定的字符串,快捷键是Ctrl Shift F,这种搜寻方式还支持正则表达式哦

4、Console控制台

想必大家都在用 console.log 在控制台输出点东西,其实console还有其它的方法:

console.log("打印字符串");//在控制台打印自定义字符串 console.error("我是个错误");//在控制台打印自定义错误信息 console.info("我是个信息");//在控制台打印自定义信息 console.warn("我是个警告");//在控制台打印自定义警告信息 console.debug("我是个调试");//在控制台打印自定义调试信息 cosole.clear();//清空控制台(这个下方截图中没有)

chrome浏览器设置网页(Chrome浏览器调试技巧)(1)

5、Sources资源

我们可以找到当然浏览器页面中的js 源文件,方便我们查看和调试,针对压缩之后的代码,我们可以点击下面的{}大括号按钮将代码转成可读格式

文件原压缩的代码:

chrome浏览器设置网页(Chrome浏览器调试技巧)(2)

转换成可读格式的代码:

chrome浏览器设置网页(Chrome浏览器调试技巧)(3)

6、Sinppets创建一个新的片段文件比如当我们想不起某个方法的具体使用时候,会打开控制台随意写一些测试代码,或者想测试一下刚刚写的方法是否会出现期待的样子,但是控制台一打回车本想换行但是却执行刚写的半截代码.

所以推荐使用Sources下面的左侧的Sinppets代码片段按钮这时候点击创建一个新的片段文件,写完测试代码后把鼠标放在新建文件上run,再结合控制台查看相关信息

新建了一个名叫:app.js的片段代码,在你的项目环境页面内,该片段可执行项目内的方法

chrome浏览器设置网页(Chrome浏览器调试技巧)(4)

7、Call Stack调用栈

当断点执行到某一程序块处停下来后,右侧调试区的 Call Stack 会显示当前断点所处的方法调用栈,从上到下由最新调用处依次往下排列,Call Stack 列表的下方是Scope Variables列表可以查看此时局部变量和全局变量的值。图中可以看出,我们最先走了toggleTab这个方法,然后走到了一个更新对象的方法上,当前调用在哪里,箭头会帮你指向哪里,同时我们可以点击,调用栈列表上的任意一处,即可回头再去看看代码

chrome浏览器设置网页(Chrome浏览器调试技巧)(5)

但是若你想从新从某个调用方法出执行,可以右键Restart Frame(我测试时未发现该功能), 断点就会跳到此处开头重新执行,Scope 中的变量值也会依据代码从新更改,这样就可以回退来从新调试,错过的调试也可以回过头来反复查看

chrome浏览器设置网页(Chrome浏览器调试技巧)(6)

8、显示和修改变量值

在Console中直接输入变量,或是在Source中选择变量,然后点击右键,在右键菜单中选择" evaluate selected text in console ",就可以在Console中显示变量的值了。也可以直接在Console中输入变量名=变量值,就可以修改变量的值了,相当于我们无需借助编辑器就可以调试线上的数据

chrome浏览器设置网页(Chrome浏览器调试技巧)(7)

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页