如何使用Google浏览器自带的调试工具

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使用Google浏览器自带的调试工具相关的知识,希望对你有一定的参考价值。

使用chrome自带调试工具步骤:

1. 打开Chrome,打开任意一个网页,下图为新浪首页:

2. 按下F12键,能看到会弹出如下图所示的对话框

3. 鼠标右键需要修改的地方,在弹出的选项选择”检查“,如下图:

4. 可以看到需要改动的地方,对应区域的CSS样式都在右侧区域显示,此时在右边的代码就可以进行调试了,如下图:


参考技术A 打开Google浏览器,打开任意一个网页,这里以百度首页为例

按下F12键,能看到会弹出如下图所示的对话框

鼠标右键需要修改的地方

可以看到需要改动的地方,对应区域的CSS样式都在右侧区域显示

鼠标左键单击箭头所指区域,可添加所需的样式,并且可以实时的显示出来,当不需要时,去掉勾选即可,也可以直接按删除,制表符Tab可以自动补全属性名称

可以根据标签的id或者class值获取其属性,当提示undefined时,就需要查看是否存在这个标签值

下图显示的是进入网页所需的文件,同样的可以在里面直接修改,但不会保存到本地文件中

下面才是调试的重头戏,以12306购票网为例,按下F12,打开需要调试的JS文件,在行开头单击鼠标左键,打下断点,如下图所示。快捷键F11是进入下一步,shift+F11跳出进入下一步,F8跳到下一个断点,这样就可以看到每一步程序运行所显示的结果,此时可以用步骤6用到的方法来查看标签的属性
步骤阅读
参考技术B 打开谷歌浏览器,按下键盘上的F12就行了。 参考技术C google浏览器的调试工具是全英文的,所以你首先要英文过关,其次是你必须对网页结构、代码非常熟悉。望采纳,谢谢

chrome自带的调试工具

由于项目需要加载webgl对浏览器内存压力很大,需要优化内存,网上找了一下资料,极力推荐chrome的开发文档

https://developers.google.cn/web/tools/chrome-devtools/memory-problems/

上面详细讲解了了调试过程,以及解决内存问题。其中有使用快照Heap snapshots以及Allocation Profile(两者的使用区别我比较水,也不是很清楚,,,),F12打开调试工具,选择memory,这里我们检查内存消耗选用Allocation Profile,然后开始记录,然后我开始操作,等待相应完成后结束记录,打开profile文件可以看到所有执行的js消耗的内存都记录了下来技术分享图片

可以看到执行最多是i.checkEvent这个,消耗300多M内存,根据需要去除无用代码。

 

以上是关于如何使用Google浏览器自带的调试工具的主要内容,如果未能解决你的问题,请参考以下文章

如何使用Google浏览器自带的调试工具

chrome自带的调试工具

如何设置我的纬度和经度以使用 Google Chrome 调试 Geolocation API?

谷歌浏览器(Google Chrome)开发调试详细介绍

如何使用debug调试工具

如何使用IE9浏览器自带开发人员工具捕获网页请求