Chrome开发工具

你可能已经熟悉了Chrome开发工具的基本功能。: DOM检查器、样式面板和JavaScript控制台。 但也有一些不太为人所知的特性可以显著提高你调试或开发应用的速度。

黑色主题

Chrome开发工具的内置了黑色主题。你可以通过点击开发工具窗口右上角的三点图标,之后点击进入设置页面,切换主题。

有时候我觉得黑色主题让我的眼睛更舒服,并且黑色主题显然看起来更酷一些 :)

选择模式

Chrome开发者工具提供了很多选择元素的方法,其中最快捷的方法就是使用选择模式。

该功能通过点击调试面板左上角的按钮开启(或者通过组合键 ctrl + shift + c), 该模式下你只需单击页面上的元素就可以选中它。

一旦开启该模式,你可以将鼠标移动到页面来预览选定内容,然后单击来选择要检查的元素。

通过ctrl + shitf + c键,你可以直接打开调试工具并开启调试模式,来在页面上快速选择一个元素。

存储为全局变量

有时在控制台中查看一个复杂对象是一件很麻烦的事,因为他们可能有很多的键值或者一些很难手动解析的值。幸运的是,Chrome可以让检查这类JavaScript对象变得很容易。 你只需在控制台中右键点击对象后选择“存储为全局变量”,chrome就会将这个变量存储为一个名叫“temp1”的变量,之后你可以通过Javascript对其进行操作。

动画工具

最近,Chrome团队为调试和创建动画添加了一些新特性。

单击控制台左上角的下拉框中的“动画”开启动画调试工具,你可以通过它限制站点上所有动画的速度。

你也可以暂停所有动画。这对于一个充斥着动画内容的站点尤其有用。

动画查看器允许你单独控制每个属性的时间曲线!

通过点击一个元素 transition 属性中的紫色曲线图表按钮,你可以看到动画的移动曲线,并且微调他的属性。此外,你还可以使用一些预置的时间曲线来应用到你的元素上。

模拟元素伪态

通过点击样式窗口右上角的:hover图标,你可以打开元素状态模拟工具。

该工具可以让你模拟一个元素的hover,active,focused和visited伪态,并且看到不同伪态的相关样式与选择符。

如果要为这些伪态添加样式,可以添加一个新的选择器(使用“+”图标),并将:添加到选择器的结尾。

例如,如果我想要给一个logo类的li标签添加hover伪态样式,我需要构造一个新的伪类li.logo:hover,并且给他添加相关属性。

之后可以通过模拟hover状态来检查你的样式是否正确。

美化CSS和JavaScript

调试、浏览压缩后的JavaScript和CSS是一件非常困难的事情,好在调试工具让这件事情变得容易了一些。

在“Source”的标签栏打开了一个压缩的文档后,你可以点击左下角的花括号logo,之后调试工具就会将代码进行格式化处理。

尽管在压缩过程中丢失了一些信息(例如变量名),该工具对调试CSS和JavaScript文件还是很有用的。

Alt + Up / Alt + Down

在调试CSS时,你可以选择一个属性然后使用上下箭头来调整它的值。默认情况下,上下箭头会将值加减1。但如果你按住了alt键,再通过上下箭头调整值时候,每次增减的值就会变成0.1,这在处理一些浮点类型的数值属性时非常有用。

相反的,你可以按住shift键一次将数值加减10

保存日志

保存日志是一个复选框,它允许在页面刷新后仍然保存日志。这在调试需要刷新页面的网站问题时非常有用,因为默认情况下,所有控制台输出的信息在页面刷新后都会被清除。

启用此选项后,控制台中会出现一个新的“导航”日志,它指向了刷新或是导航到的页面。

网络 + 日志过滤

当调试具有大量网络请求或控制台日志的应用程序时,过滤特定类型的事件是很有用的。

Chrome有一种支持多种属性的过滤语言,以及类似于*的通配符。

如果你输入了“-”,Chrome会出现一个包含了可选过滤选项的提示框。你也可以打开“正则模式”来对每一行的数据进行正则匹配。

代码覆盖率

代码覆盖率可以在运行Web应用程序后针对每个JavaScript和CSS文件,查看哪些代码行运行了,哪些代码没有运行。这是很有用的,因为在处理复杂或长期项目时,很容易在项目中累积无用的代码。

如果想要使用这个功能的话,首先升级Chrome到59或更高版本,之后切换到“Coverage”页面。点击“record”,之后开始使用你的Web应用。当你使用结束后,Chrome将向你显示操作期间运行的具体代码。

调试用户遇到的问题

通常来说调试工具只有在你自己的机器上才会生效。但如果你有兴趣了解用户在使用过程中遇到的的bug和性能问题,不妨尝试一下LogRocket

LogRocket是一个前端日志记录工具,它可以让你重放问题,就像它们发生在你自己的浏览器中一样。 不是通过猜测错误发生的原因,或要求用户提供截图或者错误日志,logrocket可以让你通过重放快速了解到问题出在哪里。它的兼容性很好,无论在任何框架下都可以使用,并且LogRocket对于React、Angular、和Vue的提供了额外的日志插件。

LogRocket会记录你应用程序中的日志信息、带有header和body的网络请求、浏览器的元数据、Redux的行为与状态、以及应用进行时间与性能。并且他还能记录页面的HTML和CSS样式,完美的还原页面。

点击这里了解LogRocket

LogRocket | JavaScript应用的日志记录和会话回放 _LogRocket帮助你理解那些影响用户的问题, 这样你就可以重新构建更好的的软件。

感谢阅读,希望这些调试工具的小技巧可以帮助你更好地构建应用。

原文链接:http://www.zcfy.cc/article/mastering-chrome-developer-tools-next-level-front-end-development-techniques-3722.html?t=selection

时间: 2024-10-02 07:50:07

Chrome开发工具的相关文章

Chrome 开发工具指南

Chrome 开发工具指南 谷歌 Chrome 开发工具,是基于谷歌浏览器内含的一套网页制作和调试工具.开发者工具允许网页开发者深入浏览器和网页应用程序的内部.该工具可以有效地追踪布局问题,设置 JavaScript 断点并可深入理解代码的最优化策略. 适用人群 这篇教程将会带你从头开始使用学习如何利用 Google 提供的组件进行 Chrome 上的相关开发调试工作. 通过本教程,你将学会如何使用这些工具,并且学会如何通过它来分析调试提供的 Demo . 学习前提 在你继续本教程之前,你必须对

Chrome 开发工具 Workspace 使用(转)

前端开发中我们经常要在浏览器中做一些细节调整,比如对 CSS 的微调,最快的方式当然是直接在 Chrome 的开发者工具中调整,但问题在于在控制台中调试好的数值我们还需要再在 CSS 源码中再写一次,效率就低了不少.而 Chrome 的 Workspace 工具就能帮助我们把调试工具中修改的内容自动保存到相应的文件中. 方法也挺简单,下面以调试一个 CSS 文件为例: 打开需要调试的页面,再开启调试工具(F12.alt + command + i),切换到 Sources 选项卡,在 CSS 资

Chrome 开发工具之Sources

Sources面板主要用于查看web站点的资源列表及javascript代码的debug 熟悉面板 了解完面板之后,下面来试试这些功能都是如何使用的. 文件列表 展示当前页面内所引用资源的列表,和平常的文件tree一样. 内容区域 可在该区域查看打开的文件的脚本,也可以在区域内下断点,打断指定执行代码行. 断点方式: 1.在脚本中写入debugger 2.在Sources面板文件内标注断点. debugger: var num = 1; console.log(num); debugger; 效

Chrome开发工具Network没有显示完整的http request和response对话

Chrome开发工具Network没有显示完整的http request和response对话 这几天看<http defintion guide>介绍Authorization和www-Authorization的机制时不是很理解,因此自己动手做实验,从而发现了Chrome开发工具Network一点有趣的小问题,特此记录. Authorization和www-Authorization是http header,用于对客户端用户的身份认证,过程如下图. (1)client向server发出re

Chrome 开发工具 Workspace 使用

前端开发中我们经常要在浏览器中做一些细节调整,比如对 CSS 的微调,最快的方式当然是直接在 Chrome 的开发者工具中调整,但问题在于在控制台中调试好的数值我们还需要再在 CSS 源码中再写一次,效率就低了不少.而 Chrome 的 Workspace 工具就能帮助我们把调试工具中修改的内容自动保存到相应的文件中. 方法也挺简单,下面以调试一个 CSS 文件为例: 打开需要调试的页面,再开启调试工具(F12.alt + command + i),切换到 Sources 选项卡,在 CSS 资

chrome开发工具指南(一)

注意:如果你是一个网页开发者同时想要获得最新版本的开发工具,那么你应该使用谷歌浏览器(金丝雀)Canary 版. Chrome 开发者工具 打开Chrome 开发者工具 选择浏览器位于浏览器窗口右上方的菜单栏的工具目录,选择开发者工具选项. 右击页面任何位置并选择审查元素. 开发工具将会在浏览器的下方打开. 有一些快捷键也可以用来打开开发工具: Ctrl + Shift + I ( 或在 Mac 上使用 Cmd + Opt+ I). Ctrl + Shift + J ( 或在 Mac 上使用 C

Chrome开发工具Elements面板(编辑DOM和CSS样式)详解

Element 译为“元素”,Element 面板可以让我们动态查看和编辑DOM节点和CSS样式表,并且立即生效,避免了频繁切换浏览器和编辑器的麻烦. 我们可以使用Element面板来查看源代码,它不但可以很好的格式化DOM节点,清晰的展现HTML文档,还可以查看JavaScript创建的DOM节点和iframe中的DOM节点,比在当前网页中右击鼠标选择“查看网页源代码”强大很多. 总之,Element面板可以让我们很透彻的了解DOM和CSS的底层结构. 我们将以下面的HTML代码为例来详细了解

Chrome 开发工具之Elements

友情提示:全文图片高能,如使用手机阅读,请确保在wifi情况下或者流量充足.图片有点渣,也算辛苦做出来的,请别嫌弃- Elements面板主要展示当前页面的组织结构,在如今的应用程序中,HTML页面初始化时加载的不一定就是之后看到的DOM树,有一个页面结构的实时调试工具可以很好的帮助开发者调试开发和调试bug,下面开始认识下Elements面板. 打开开发工具 1.右键点击页面,点击"检查" (mac && window) 2. control+command+j (m

在 chrome 开发工具中使用终端

chorme 中的功能越来越强大, 不仅可以编辑文件, 如果能直接使用控制台, 那运行系统命令什么的也都不用再切换窗口了. 这次真的边开发边预览了!目前有两个实现方式, 外部插件版及官方测试版.ps: 希望官方版早点发布. 外部插件版 DevTools Terminal 是一个Chrome DevTools扩展, 它把操作系统终端功能带入到Chrome浏览器中. 你可以在Chrome DevTools开发者工具中使用操作系统终端来完成需要执行的shell命令和操作. $ sudo npm ins