例如我想查看元素触发 hover
时的 css 样式。先选中该元素,而后按下图操做:css
document.body.contentEditable="true"
在控制台输入 document.body.contentEditable="true"
,就能够对页面直接进行编辑。web
如今能够查看元素的 placeholder 样式了:chrome
下面是测试报告:网络
参考资料:chrome-devtools
通常 Network 会显示加载资源的详细信息,但它默认只显示部分信息。若是我想查询网页资源是经过 HTTP1.1 仍是 HTTP2 加载的,要怎么作呢?函数
从 GIF 中能够看出,除了 HTTP 协议版本外,还能够查看其余信息,例如 HTTP 请求的方法、域名等等。工具
鼠标移到 handler
上,可查看具体的函数代码。布局
打开开发者工具,点击 Console
标签,按 ESC 弹出:性能
点击左边竖形排列的三个小点,选择 Search
:测试
点击搜索结果,会跳到具体的源码文件。它会搜索该网页下全部引入的文件。
打开开发者工具,点击 Performance
标签:
点击左上角的 Record
按钮开始记录,而后你模拟正经常使用户使用网页。测试完毕后,点击 Stop
。
能够看到右上角分别有 FPS、CPU、NET、HEAP:
NET 最好点击下面的 Network 查看,能够看到具体的加载资源等。
通常根据这些信息就能判断出网页性能问题出在哪。
若是想了解更多,请查看下面的参考资料,须要翻 qiang。或者用搜索引擎搜索 chrome performance,也有不少讲解使用方法的文章。
参考资料
打开开发者工具,点击 Console
标签,按 ESC 弹出:
点击左边竖形排列的三个小点,选择 Rendering
:
下面是比较实用的功能:
从图中看到,在 Application
标签下能够查到本页面不少信息。拿 localStorage
举例,如今我执行代码 localStorage.setItem('token', '123')
,而后打开 Application
:
不出意外,能看到新增的 localStorage
信息。