阅读 93

chrome调试工具(DevTool)的15个使用窍门和秘密

很多前端都会天天用到chrome调试工具,但是,很多人却不太深入理解chrome的DEVTOOL。今天分享15个使用窍门,帮助你更好的使用和进行前端开发。

1.使用隐身模式

隐身模式使用单独的用户配置文件,在浏览网页或重启后,不保留cookie,localStorage或缓存文件之类的数据。每个会话均以干净的状态开始,因此非常适合测试登录系统,首次加载性能和渐进式Web应用程序(PWA)。有一些较小的限制,例如阻止安装PWA,但这些限制在开发过程中不太会引起严重问题。

通常可以从浏览器菜单或右键单击其桌面图标来访问隐身模式。chrome还可在浏览器菜单中,打开隐身模式页签。

2.自启动DevTools

要开始开发,通常需要启动浏览器(也许在隐身模式下),打开DevTools,然后导航到本地URL。通过在浏览器启动命令中添加选项,只需单击一下即可自动完成整个过程。

最好创建一个新的快捷方式或脚本以在开发模式下启动,然后为Google Chrome添加:

--incognito 以隐身模式开始 --auto-open-devtools-for-tabs 启动DevTools,并将测试网址放在末尾,例如http://localhost:8000/

在Windows设备上,通过修改桌面图标,右键修改快捷方式指向就可完成,具体代码如下:

“ C:\ Program Files \ Google \ Chrome \ Application \ chrome.exe” --incognito --auto-open-devtools-for-tabs http:// localhost:8000

其他有用的Chrome 配置参数包括:

--allow-insecure-localhost 忽略localhost域上的SSL错误 --disable-extentions 开始时不使用可能会影响渲染的扩展程序,例如广告拦截器 --window-size=, 设置初始窗口大小 --window-position=, 设置初始窗口位置 --user-data-dir="

"设置用户配置文件目录。因此,Chrome的不同实例可以使用不同的用户个人资料。可以删除目录以擦除所有先前的数据。 还有许多其他的Chrome选项可用。

可以将类似的开关添加到chrome启动快捷方式中:

  • -private 以私有模式启动
  • -devtools 启动DevTools

并将测试网址放在-url选项的末尾或之后。

3.使用命令面板

Chrome的DevTools提供了和编辑器一样的命令选项板。在任何DevTools面板中,按Ctrl|Cmd+ Shift+P然后按名称搜索选项:

image.png

输入关键字,即可按其名称搜索已加载的文件。

4.查找未使用的JavaScript

Chrome的面板使您能够快速定位的JavaScript(和CSS),有代码-并没有-被使用。首先,从DevTools菜单中的More tools子菜单中打开Coverage。重新加载页面,面板将用条形图显示未使用代码的百分比:

image.png

单击任何JavaScript文件,未使用的代码在行号装订线中用红色条突出显示。

如果要测试单页应用程序,则可以浏览并使用功能来更新未使用的代码指示器。但是,重新加载或导航到新页面时,覆盖范围信息会重置。

这是了解您在代码中使用多少外部依赖关系的好工具,如果您要导入一个100kb的库并且仅使用其中的1%,那么您也会在这里清楚地看到它。

5.找到DOM节点,更改代码

当事件发生时,很难确定哪个函数负责更新特定的HTML DOM元素。要找到一个进程,请在“元素”面板中右键单击任何HTML元素,然后从“中断时”子菜单中选择一个选项:

image.png

  • 修改子树以监视何时更改元素或任何子元素
  • 属性修改以监视元素的属性(例如)何时class更改或
  • 节点移除以监视何时将元素从DOM中移除。
  • 发生此类事件时,将在“源”面板中自动激活断点。

Firefox DevTools在“检查器”窗格中提供了相同的功能。此外,Firefox会指示哪些DOM节点具有附带事件图标的处理程序。可以单击以查看更多信息,展开处理程序功能,或在调试器中打开它:

image.png

6.调节网页加装速度(网速)

在快速,可靠的网络上使用高端PC测试您的站点可能并不表示实际使用情况。您的用户的移动连接可能不可靠,或者已连接到过载的机场Wi-Fi。

“网络”选项卡提供了一个限制选项,该选项可以人为地降低HTTP上传速度,下载速度和延迟(连接或响应中的附加延迟)。这可以帮助确定性能瓶颈的原因:

image.png

基于Chrome的浏览器可让您添加自己的自定义网络配置文件。

7.过滤网络资源请求类型

DevTools的“网络”面板提供了几个过滤器,其中包括一个仅显示JavaScript请求的JS按钮。当您输入URL的一部分时,过滤器搜索框可以找到请求,但是它也接受特殊命令,包括:

  • 使用以下内容过滤缓存的请求 is:cached
  • 使用过滤不完整的请求 is:running
  • 通过输入来识别大型请求larger-than:,其中大小以字节(1000000),千字节(1000k)或兆字节(1M)为单位,或者
  • 通过输入识别第三方资源-domain:。您的域可以使用通配符,例如*。

8.黑盒调试脚本和代码

有时没有必要确切地知道JavaScript错误的发生时间,地点或位置。尝试调试无法轻松更改的库(React,Vue.js,jQuery等)或第三方脚本(分析,社交媒体小部件,聊天机器人等)中的问题通常是徒劳的。

DevTools允许脚本被blackboxed所以他们永远不会在调试器中打开,即使你选择步入其功能之一。要在Firefox中将文件黑匣子,请在“调试器”面板中打开一个文件,然后单击“忽略源代码”眼睛图标:

image.png

在Chrome DevTools源面板中,打开一个文件,右键单击代码中的某个位置,然后选择添加脚本以忽略列表。您也可以通过右键单击数字装订线,然后从菜单中选择“从不暂停”,将单个语句加黑框。

或者,单击设置齿轮图标或按F1以访问“设置”,然后切换到“忽略列表”选项卡。选中添加内容脚本以忽略列表,并使用正则表达式输入任意数量的文件名模式,例如jquery.*.js:

image.png

9.使用日志输出

console.log()在整个文件中自由插入调试语句很诱人,但是日志点提供了一种无需编写任何代码即可获取相同信息的方法。

要添加日志点,请在“源”面板(或Firefox中的“调试器”面板)中打开脚本,右键单击任何行号,然后选择“添加日志点…”。输入一个表达式,例如您将在console命令中使用的表达式,例如

复制代码

每当执行该行时,该消息就会出现在DevTools控制台中。日志点通常将在页面刷新之间保持不变。

10.使用条件断点

单击“源”面板(或Firefox中的“调试器”面板)中打开的文件的行号会添加一个断点。它会在执行过程中暂停脚本,因此您可以单步执行代码以检查变量,调用堆栈等。

断点并不总是可行的,例如,如果在运行1000次的循环的最后一次迭代中发生错误。但是,可以设置条件断点,以便仅在满足特定条件时才触发i > 999。要设置一个,请右键单击行号,选择“添加条件断点…”,然后输入条件表达式。

11.终止无限循环方法

写代码时,很容易触发无限循环,他导致浏览器进程不堪重负。尽管有多年的经验,但我最近一次是由于在JavaScriptfor循环中不小心反转了表达式而使它永无止境!

要在Chrome DevTools中停止无限循环,请打开“源”面板,然后单击调试暂停图标以停止脚本。按住相同的图标,然后选择方形停止图标以停止脚本处理。

image.png

12.重新运行Ajax请求

浏览器JavaScript Ajax调用通常使用Fetch或XMLHttpRequest API从远程服务器请求数据。这些显示在“ DevTools网络”面板中,可以使用XHR按钮进行过滤。

DevTools显示了很多信息,但是有时重新运行Ajax调用并在另一个工具中分析结果有时是可行的。右键单击任何请求,然后从“复制”子菜单中选择一个选项:

image.png

13.启用本地文件替代服务端文件

Chrome允许任何HTTP请求使用您设备上的本地文件,而不是通过网络获取文件。这样可以使您:

在不需要构建工具的情况下在实时站点上编辑脚本或样式 离线开发一个网站,该网站通常会要求第三方或域提供基本文件 临时替换不必要的脚本,例如分析调试。

在本地PC上创建一个目录,在该目录中将存储替代文件,例如localfiles,然后打开Chrome的DevTools Sources面板。打开左侧窗格中的“替代”选项卡,单击+选择要替代的文件夹,然后选择您创建的目录。系统将提示您允许文件保存在本地,并且目录将出现:

image.png

现在打开“页面”选项卡并找到任何源文件。有两种方法可以将其添加为本地替代:

  • 右键单击该文件,然后选择“保存以替代”,或者
  • 打开文件,进行编辑,然后用Ctrl|保存。Cmd+ S。
  • 文件图标显示为带有紫色的覆盖指示符:

image.png

它还将显示在“替代”选项卡和localfiles目录中。可以在Chrome中或使用任何代码编辑器编辑该文件-每当重新加载页面时,都会使用更新的版本。

14.管理客户端存储

网页可以使用多种技术将数据存储在客户端上。Chrome DevTools中的“应用程序”面板(或Firefox中的“存储”面板)允许您添加,检查,修改和删除cookie,缓存存储,localStorage,sessionStorage,IndexedDB和Web SQL(如果支持)中保存的值。

image.png

Chrome中的“存储”标签显示本地存储了多少数据,并提供了一个快速的“清除站点数据”选项。

15.模拟移动硬件

智能手机和平板电脑通常包括诸如全球定位系统(GPS),陀螺仪和加速度计之类的硬件。这些通常在台式机中不可用,这会使使用地理定位等API进行开发变得更加困难。

Chrome可以在DevTools中模拟设备硬件-从“更多工具”菜单中选择“传感器” :

image.png

支持选项:

  • 选择一个主要城市或输入自定义的纬度和经度。也可以将该位置设置为不可用,以模拟GPS信号失败时应用程序的响应方式。
  • 使用预设或自定义指标设置设备方向。您可以点击和智能手机拖到绕X任何Ÿ轴,或按住Shift围绕旋转ž轴。
  • 强制触摸而不是鼠标或其他本机设备事件,并且
  • 设置空闲状态以检查您的应用如何响应锁定屏幕。

DevTool奉献

浏览器DevTools已从基本的JavaScript日志记录演变为全面的开发和调试环境。它们看起来很复杂,但是通过一些试验和学习,您会发现并喜欢可以节省数小时编码工作量的功能。

文章分类
前端
文章标签