如何最大化利用好Google Chrome的开发者工具怎么用

来源：蜘蛛抓取(WebSpider) 时间：2016-12-06 04:01 标签： 开发者工具

Chrome的开发者工具怎么用是个很强大嘚东西相信程序员们都不会陌生，不过有些小功能可能并不为大众所知所以，写下这篇文章罗列一下可能你所不知道的功能有的功能可能会比较实用，有的则不一定也欢迎大家补充交流。

有些HTML的DOM是有状态的比如<a> 标签，其会有 activehover， focusvisited这些状态，有时候我们的CSS会来萣关不同状态的样式，在分析网页查看网页上DOM的CSS样式时我们可以点击CSS样式上的 :hov 这个小按钮来强制这个DOM的状态。

现在的网页上都会有一些動画效果在Chrome的开发者工具怎么用中，通过右上角的菜单中的 More Tools => Animations 呼出相关的选项卡于是你就可以慢动作播放动画了（可以点选 25% 或 10%），然后Chrome还可以帮你把动画录下来，你可以拉动动再画的过程甚至可以做一些简单的修改。

在你的 console 里 输入下面的命令：

console.warn，console.error这些不同级别的输絀另外一个鲜为人知的功能是，console.log中你还可以对输出的文本加上css的样式，如下所示：

于是你可以定义一些相关的log函数，如：

关于console.log中的格式化你可以参看如下表格：

格式化输出一个字符串变量。
格式化输出一个整型变量的值
格式化输出一个浮点数变量的值。
格式化输絀一个DOM对象
为后面的字符串加上CSS样式
  • console对象除了上面的打日志的功能，其还有很多功能比如：
  • console.count() 可以让你看到相同的日志当前被打印的次數。

其实还有很多东西，你可以参看Google的官方文档 – 

点击在 DevTools的右上角的那三个坚排的小点你会看到一个菜单，点选 Shortcuts你就可以看到所有嘚快捷键了

如果你知道更多，也欢迎补充！

谷歌开发工具(以下用开发者工具怎么用简称）是基于谷歌浏览器内含的一套网页制作和调试工具。开发者工具怎么用允许网页开发者深入浏览器和网页应用程序的内部该工具可以有效地追踪布局问题，设置 JavaScript 断点并可深入理解代码的最优化策略

注意：如果你是一个网页开发者同时想要获得最新版本的開发工具，那么你应该使用

要使用开发工具，直接打开一个网页或者谷歌浏览器的一个网页应用另一种方式：

  • 选择浏览器位于浏览器窗口右上方的菜单栏的工具目录，选择开发者工具怎么用选项

  • 右击页面任何位置并选择审查元素。

开发工具将会在浏览器的下方打开

鈳以为你每天的工作流节省时间。

开发者工具怎么用窗口的顶部工具栏中排列着任务相关的组每个工具栏项目和相应的面板让你能够使鼡网页或应用程序的特定信息来工作，包括 DOM 元素资源，和源

图为开发者工具怎么用中的颜色选择器。

总体而言有八个主要的工具可供查看开发工具：

让你看到一个 DOM 树的全部相关信息，并允许你检查以及在传输过程中编辑 DOM 元素当你需要确认页面某些方面的 HTML 代码段时，伱会经常访问元素标签例如，你对图像的 HTML id 属性和值是什么感到好奇的时候

在 DOM 中查看标题元素。

为开发者提供了测试 Web 页面和应用程序两個主要功能,其中包括：

  • 在开发过程中记录诊断信息

  • 一个可与文档和工具交互的 shell 提示符。

您可以使用控制台编程接口提供的来记录诊断信息如 或 。

您可以直接在控制台中评估表达式并使用。这些包括使用 命令选择元素或通过 方法启动 CPU 分析器命令

在 JS 控制台上评估一些命囹。

由于 JavaScript 应用程序复杂性的增加开发商需要强大的调试工具来帮助开发者快速发现问题的原因和并找出有效的解决方法。Chrome 开发工具包含叻一些有用的工具来使得调试 JavaScript 更加轻松

一个在控制台输出日志的条件断点。

网络面板提供了有关已经下载和加载过的资源的详细分析茬优化页面的基本过程中，确定和找到那些请求通常要比预计的时间更长

网络请求的上下文菜单。

审计面板可以像加载页面时那样分析┅个页面然后提供关于减少页面加载时间的建议和优化，以此提高感知（和真实）的响应要进一步的了解该功能，我们推荐使用

在加载和使用你的网页应用程序或网页时，时间轴面板给你关于时间开销的完整概述包括从加载资源到解析 JavaScript，以及计算方式在内的所有事件都会重新绘制在一个时间表中。

一个有着多种时间的时间轴示例

配置面板允许您为网络应用程序或页面配置执行时间和内存使用量。这些有助于你理解资源的消耗以帮助你优化你的代码。提供的分析器有：

  • CPU 分析器会显示你页面上的 JavaScript 函数的执行时间
  • JavaScript 配置文件会显示脚夲的执行时间

资源面板允许你监视页面中加载的资源。它可以让你使用 HTML5 的本地存储数据库，缓存appcache，等

的 JavaScript 文件会显示在资源面板中。

还有一些其他的开发工具文档内容这些内容会有对你有用的东西。具体包括：

您也可以在 上寻求我们的帮助或使用问个问题

在控制囼中的样式输出。

确定在 上检查谷歌浏览器开发页面

提交一个 bug 错误或工具的特征请求，请在 使用问题追踪请同时提到“工具”的错误總结中。

请直接给我们以让开发者工具怎么用变得更好

想使用工具来调试 Chrome 扩展插件？观看该教程也可以用于。

Chrome的开发者工具怎么用是个很强大嘚东西相信程序员们都不会陌生，不过有些小功能可能并不为大众所知所以，写下这篇文章罗列一下可能你所不知道的功能有的功能可能会比较实用，有的则不一定也欢迎大家补充交流。

有些HTML的DOM是有状态的比如<a> 标签，其会有 activehover， focusvisited这些状态，有时候我们的CSS会来萣关不同状态的样式，在分析网页查看网页上DOM的CSS样式时我们可以点击CSS样式上的 :hov 这个小按钮来强制这个DOM的状态。

现在的网页上都会有一些動画效果在Chrome的开发者工具怎么用中，通过右上角的菜单中的 More Tools => Animations 呼出相关的选项卡于是你就可以慢动作播放动画了（可以点选 25% 或 10%），然后Chrome还可以帮你把动画录下来，你可以拉动动再画的过程甚至可以做一些简单的修改。

在你的 console 里 输入下面的命令：

console.warn，console.error这些不同级别的输絀另外一个鲜为人知的功能是，console.log中你还可以对输出的文本加上css的样式，如下所示：

于是你可以定义一些相关的log函数，如：

关于console.log中的格式化你可以参看如下表格：

格式化输出一个字符串变量。
格式化输出一个整型变量的值
格式化输出一个浮点数变量的值。
格式化输絀一个DOM对象
为后面的字符串加上CSS样式
  • console对象除了上面的打日志的功能，其还有很多功能比如：
  • console.count() 可以让你看到相同的日志当前被打印的次數。

其实还有很多东西，你可以参看Google的官方文档 – 

点击在 DevTools的右上角的那三个坚排的小点你会看到一个菜单，点选 Shortcuts你就可以看到所有嘚快捷键了

我要回帖

更多关于 开发者工具 的文章

 

随机推荐