Chrome浏览器目前是是世界上使用最广泛的浏览器,Chrome不仅提供了非常强大的网页浏览功能,而且对开发者而言,也有非常强大的开发者工具。岩兔站今天给大家总结一下Chrome开发者工具中的常用功能。
Chrome的开发者工具在建设网页的过程中,能极大的提高工作效率,所以掌握开发者工具的使用,非常的有必要。本文演示的浏览器基于目前最新的Chrome68稳定版。其中所列举的功能适用于多数版本的谷歌浏览器,同时一些常用功能同样可以在FireFox、Edge浏览器中使用。
打开开发者工具
要想使用开发者工具,首先要打开开发者工具栏,开启方法如下:
- 在浏览器的右上角点击菜单(三个小圆点) -> 更多工具 -> 开发者工具。
- 按 ‘Ctrl + Shift + I’ (Windows, Linux) 或者 ‘Command + Option + I’ (Mac)。
- 右键点击页面元素,菜单中选择“审查元素”。
好了,现在在浏览器中已经出现了开发者工具面板。
Elements – 查看和编辑HTML/CSS
开发者工具能很方便的查看页面的HTML内容、文档结构、和CSS样式等内容。
如果想查看Logo的代码内容,可以用选择工具点选Logo,开发者工具会同步定位到Logo代码和CSS。
如果有需要,甚至可以直接在下方编辑HTML及CSS内容,所有编辑过的内容,将在页面上实时生效。这就避免了开发人员一次次修改原始代码,一次次刷新界面,可以直接将页面调整至满意效果再统一更新代码。
示例如下:将“首页”的文字在开发者工具左边栏中改为“岩兔站”,并在右边栏中增加颜色样式表,更改为红色显示。
提示:如果要要修改:hover或:visited等样式,可以点击右栏CSS窗口中“:hov”按钮进行操作。
Console – 控制台
控制台可以当作是一个自由使用的舞台,这里可以执行何何JS代码,并且可以读取当前页面中的公共变量,对当前页面方法进行执行和调用等。
控制台还可以显示页面上所有的错误信息,方便我们进行排错。
检测响应式网站
现在多数网站都做到了响应式,但是浏览终端各不相同,有手机平板电脑等设备,即使做了手机版,能不能保证小屏手机和大屏手机有一样的浏览效果呢?我们不能找到很多设备依次检测,但是通过开发者选项可以模拟多种终端的访问状态。
首先将开发者工具移至右边栏,在菜单中设置“Dock side”为“right side”。
然后启用手机、平板浏览模式,左边栏即可选择多种设备进行模拟访问,并且支持自定义大小的设备。
Sources – 调试JS代码
JS是运行在浏览器端的语言,如果能在JS运行的浏览器上进行打断点调度,一定是非常方便的。谷歌开发者工具也提供了打断点进行调试JS的功能。
调试步骤如下:
- 标签切换至“Sources”
- 左边栏选择需要调试的JS文件
- 中间选择需要调度的行,并打断点
- 刷新页面,运行至断点处时将暂停运行,最右侧面板可控制页面单步运行。
小提示:
- 如果要调试的代码是压缩或.min.js文件,开发者工具会提供自动整理代码功能。点击代码段最下方的“ { } ”按钮,将自动进行代码整理,然后正常打断点进行调试。
- 在调试过程中,可以随时通过“Esc”键,打开控制台,在控制台中,可以实时查看各种变量的值。
Network – 网络模块
网络模块可以监测并记录整个网站的所有请求,请求的各类头信息和请求内容都能查看的到,各种类型的请求还可以进行快速的筛选。
如果有某些请求出错,在网络模块中也很容易体现,所有失败的请求都会以红色进行显著标识。每个请求都会有一个时间线,在这个页面,我们也很容易找出那些拖慢整个页面的慢速请求。
一些其他选项
- Cookies,可以查看发送和接收到的cookie值。
- Timing,统计每个请求的耗时,从而查看最慢的请求。
- 限速器,测试慢速网络,如3G状态下的页面表现。
- Offline work,离线状态下的页面表现。
- Capture screenshot,捕获页面中网页的渲染效果。
- Cache,强制跳过本地缓存,模拟新用户访问的实际情况。
Audits – 网站审计
网站审计功能是以Google LightHouse项目为后端,进行的网站基准项目测试。测试结果包括网站性能、可访问性、用户体验、SEO等方面进行详细评测,并给出分析报告。
使用过程非常简单,进行简单的设置之后自动开始进行网站评测,最终生成审计报告。
Application – 请求
请求页面显示当前网站的众多请求,其中包括cookies, local storage, application cache, images, fonts, stylesheets, registered service workers, session storage, Web SQL databases and IndexedDB等信息。每一项目的值都可以通过本页面进行查看编辑删除等操作。
各模块详解:
- Service Workers 可以展示相关站点的脚本,并可以此页进行更新,反注册,启动停止等操作。
- Clear Storage 清除所有存储想着信息。
- Frames 可通过筛选器展示资源值。
Memory – 跟踪内存泄漏
在大多数情况下,可以使用此面板可从内存泄漏和溢出来判定页面性能问题。检测性能主要提供了三种检测方式:
- Heap Snapshot: 可以显示javascript和DOM节点的内存分布快照,可以通过搜索“Detached”查找可能导致内存泄漏的DOM树,红色显示的节点表示无代码引用,而黄色表示有引用,通过分析标黄内容,分析是否超出预期。
- Record Allocation Timeline: 可以记录你认为可能导致JS泄漏的事件,点击录制按钮,运行JS事件,线束录制。生成的记录中蓝条表示内存占用量,可以通过范围选择,查看特定对象。
- Record Allocation Profiles: 以类似时间轴的形式记录javascript的内存分布。你可以从中找出占用最大的罪魁祸首。
Performance – 改善运行性能
在此选项卡中,我们可以分析网站运行时的Javascript性能。它能记录当前页面加载过程中所有事件,并将每一事件耗时呈现到统计中。还可以通过勾选“Screenshots”来限制CPU和网络性能,从而模拟低端设备状态。通过“Record”和“Stop”记录页面的全部加载过程,生成的统计图表还可以通过鼠标调整显示范围,从而找到页面中哪部分影响性能。
Security – 检查常见安全问题
只需打开此面板,就能查看当前网站的SSL证书,安全状态等常见安全问题。
其他
岩兔站常用的功能也就前几项
- 通过Elements查看页面HTML,修改CSS等
- 利用console查看脚本输出和测试JS代码
- 使用Network查看页面请求以及响应返回值
- 在Sources调试JS代码
除此之外的项目多用于页面性能调试等功能,岩兔站使用的不多,有希望更深了解的朋友可以查看参考网站。
参考:https://apsdehal.in/blog/chrome-developer-tools-to-master