一个乐于分享的博客
关注互联网折腾服务器分享码农的日常

Chrome开发者工具简明使用手册

Chrome开发者工具简明使用手册

Chrome浏览器目前是是世界上使用最广泛的浏览器,Chrome不仅提供了非常强大的网页浏览功能,而且对开发者而言,也有非常强大的开发者工具。岩兔站今天给大家总结一下Chrome开发者工具中的常用功能。

Chrome的开发者工具在建设网页的过程中,能极大的提高工作效率,所以掌握开发者工具的使用,非常的有必要。本文演示的浏览器基于目前最新的Chrome68稳定版。其中所列举的功能适用于多数版本的谷歌浏览器,同时一些常用功能同样可以在FireFox、Edge浏览器中使用。

打开开发者工具

要想使用开发者工具,首先要打开开发者工具栏,开启方法如下:

  • 在浏览器的右上角点击菜单(三个小圆点) -> 更多工具 -> 开发者工具。
  • 按 ‘Ctrl + Shift + I’ (Windows, Linux) 或者 ‘Command + Option + I’ (Mac)。
  • 右键点击页面元素,菜单中选择“审查元素”。

好了,现在在浏览器中已经出现了开发者工具面板。

Chrome开发者工具简明使用手册

Elements – 查看和编辑HTML/CSS

开发者工具能很方便的查看页面的HTML内容、文档结构、和CSS样式等内容。

如果想查看Logo的代码内容,可以用选择工具点选Logo,开发者工具会同步定位到Logo代码和CSS。

Chrome开发者工具简明使用手册

如果有需要,甚至可以直接在下方编辑HTML及CSS内容,所有编辑过的内容,将在页面上实时生效。这就避免了开发人员一次次修改原始代码,一次次刷新界面,可以直接将页面调整至满意效果再统一更新代码。

示例如下:将“首页”的文字在开发者工具左边栏中改为“岩兔站”,并在右边栏中增加颜色样式表,更改为红色显示。

Chrome开发者工具简明使用手册

提示:如果要要修改:hover或:visited等样式,可以点击右栏CSS窗口中“:hov”按钮进行操作。

Console – 控制台

控制台可以当作是一个自由使用的舞台,这里可以执行何何JS代码,并且可以读取当前页面中的公共变量,对当前页面方法进行执行和调用等。

控制台还可以显示页面上所有的错误信息,方便我们进行排错。

Chrome开发者工具简明使用手册

检测响应式网站

现在多数网站都做到了响应式,但是浏览终端各不相同,有手机平板电脑等设备,即使做了手机版,能不能保证小屏手机和大屏手机有一样的浏览效果呢?我们不能找到很多设备依次检测,但是通过开发者选项可以模拟多种终端的访问状态。

首先将开发者工具移至右边栏,在菜单中设置“Dock side”为“right side”。

然后启用手机、平板浏览模式,左边栏即可选择多种设备进行模拟访问,并且支持自定义大小的设备。

Chrome开发者工具简明使用手册

Sources – 调试JS代码

JS是运行在浏览器端的语言,如果能在JS运行的浏览器上进行打断点调度,一定是非常方便的。谷歌开发者工具也提供了打断点进行调试JS的功能。

调试步骤如下:

  1. 标签切换至“Sources”
  2. 左边栏选择需要调试的JS文件
  3. 中间选择需要调度的行,并打断点
  4. 刷新页面,运行至断点处时将暂停运行,最右侧面板可控制页面单步运行。

Chrome开发者工具简明使用手册

小提示

  1. 如果要调试的代码是压缩或.min.js文件,开发者工具会提供自动整理代码功能。点击代码段最下方的“ { } ”按钮,将自动进行代码整理,然后正常打断点进行调试。
  2. 在调试过程中,可以随时通过“Esc”键,打开控制台,在控制台中,可以实时查看各种变量的值。

Network – 网络模块

网络模块可以监测并记录整个网站的所有请求,请求的各类头信息和请求内容都能查看的到,各种类型的请求还可以进行快速的筛选。

如果有某些请求出错,在网络模块中也很容易体现,所有失败的请求都会以红色进行显著标识。每个请求都会有一个时间线,在这个页面,我们也很容易找出那些拖慢整个页面的慢速请求。

Chrome开发者工具简明使用手册

一些其他选项

  • Cookies,可以查看发送和接收到的cookie值。
  • Timing,统计每个请求的耗时,从而查看最慢的请求。
  • 限速器,测试慢速网络,如3G状态下的页面表现。
  • Offline work,离线状态下的页面表现。
  • Capture screenshot,捕获页面中网页的渲染效果。
  • Cache,强制跳过本地缓存,模拟新用户访问的实际情况。

Audits – 网站审计

网站审计功能是以Google LightHouse项目为后端,进行的网站基准项目测试。测试结果包括网站性能、可访问性、用户体验、SEO等方面进行详细评测,并给出分析报告。

使用过程非常简单,进行简单的设置之后自动开始进行网站评测,最终生成审计报告。

Chrome开发者工具简明使用手册

Application – 请求

请求页面显示当前网站的众多请求,其中包括cookies, local storage, application cache, images, fonts, stylesheets, registered service workers, session storage, Web SQL databases and IndexedDB等信息。每一项目的值都可以通过本页面进行查看编辑删除等操作。

各模块详解:

  • Service Workers 可以展示相关站点的脚本,并可以此页进行更新,反注册,启动停止等操作。
  • Clear Storage 清除所有存储想着信息。
  • Frames 可通过筛选器展示资源值。

Chrome开发者工具简明使用手册

Memory – 跟踪内存泄漏

在大多数情况下,可以使用此面板可从内存泄漏和溢出来判定页面性能问题。检测性能主要提供了三种检测方式:

  • Heap Snapshot: 可以显示javascript和DOM节点的内存分布快照,可以通过搜索“Detached”查找可能导致内存泄漏的DOM树,红色显示的节点表示无代码引用,而黄色表示有引用,通过分析标黄内容,分析是否超出预期。

Chrome开发者工具简明使用手册

  • Record Allocation Timeline: 可以记录你认为可能导致JS泄漏的事件,点击录制按钮,运行JS事件,线束录制。生成的记录中蓝条表示内存占用量,可以通过范围选择,查看特定对象。

Chrome开发者工具简明使用手册

  • Record Allocation Profiles: 以类似时间轴的形式记录javascript的内存分布。你可以从中找出占用最大的罪魁祸首。

Chrome开发者工具简明使用手册

Performance – 改善运行性能

在此选项卡中,我们可以分析网站运行时的Javascript性能。它能记录当前页面加载过程中所有事件,并将每一事件耗时呈现到统计中。还可以通过勾选“Screenshots”来限制CPU和网络性能,从而模拟低端设备状态。通过“Record”和“Stop”记录页面的全部加载过程,生成的统计图表还可以通过鼠标调整显示范围,从而找到页面中哪部分影响性能。

Chrome开发者工具简明使用手册

Security – 检查常见安全问题

只需打开此面板,就能查看当前网站的SSL证书,安全状态等常见安全问题。

Chrome开发者工具简明使用手册

其他

岩兔站常用的功能也就前几项

  1. 通过Elements查看页面HTML,修改CSS等
  2. 利用console查看脚本输出和测试JS代码
  3. 使用Network查看页面请求以及响应返回值
  4. 在Sources调试JS代码

除此之外的项目多用于页面性能调试等功能,岩兔站使用的不多,有希望更深了解的朋友可以查看参考网站。

参考:https://apsdehal.in/blog/chrome-developer-tools-to-master

转载务必注明出处:岩兔站 » Chrome开发者工具简明使用手册
赞 (0) or 打赏

讨论区 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址