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

Posted

tags:

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

首先是启动谷歌浏览器的开发者工具的方法。在浏览器右上角的选项中点击,下拉菜单选工具——开发者工具,快捷键CTRL+shift+I

打开开发者工具后,在浏览器下方出现一个调试面板。左侧是网页html调试查看,右侧是CSS代码调试,还有一些JS,资源的折叠起来了。

谷歌浏览器调试的好处就是,可以实现元素定位,把鼠标放在指定的元素上,就可以在浏览器的上面视图中加灰突出显示所对应的元素。

右侧的CSS代码调试是一个不错的工具,不仅可以查看对应的标签的代码,同时还可以实时更改代码的值并在浏览器上方视图中显现变化。

CSS调试中,还有盒子模型的形象视图。在右侧折叠面板中可以打开,实现对margin,padding等的定位计算。
参考技术A 首先是启动谷歌浏览器的开发者工具的方法。在浏览器右上角的选项中点击,下拉菜单选工具——开发者工具,快捷键CTRL+shift+I

打开开发者工具后,在浏览器下方出现一个调试面板。左侧是网页HTML调试查看,右侧是CSS代码调试,还有一些JS,资源的折叠起来了。

谷歌浏览器调试的好处就是,可以实现元素定位,把鼠标放在指定的元素上,就可以在浏览器的上面视图中加灰突出显示所对应的元素。

右侧的CSS代码调试是一个不错的工具,不仅可以查看对应的标签的代码,同时还可以实时更改代码的值并在浏览器上方视图中显现变化。

CSS调试中,还有盒子模型的形象视图。在右侧折叠面板中可以打开,实现对margin,padding等的定位计算。本回答被提问者采纳

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浏览器自带开发人员工具捕获网页请求