前端开发必备之Chrome开发者工具(上篇)

作者:admin来源:lanyunwork时间:2018.03.12

Chrome 开发者工具是一套内置于 Google Chrome 中的Web开发和调试工具,可用来对网站进行迭代、调试和分析

打开 Chrome 开发者工具的方式有:

  • 在Chrome菜单中选择 更多工具 > 开发者工具

  • 在页面元素上右键点击,选择 “检查”

  • 使用 快捷键 Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac)。更多快捷键https://developers.google.com/web/tools/chrome-devtools/shortcuts

Chrome 开发者工具主要包含以下10个部分:

  1. 设备模式(device toolbar)

  2. 元素面板(Elements)

  3. 控制台面板(Console)

  4. 源代码面板(Sources)

  5. 网络面板(Network)

  6. 性能面板(Performance)

  7. 内存面板(Memory)

  8. 应用面板(Application)

  9. 安全面板(Security)

  10. 主菜单(Customize and control DevTools)

设备模式(device toolbar)

使用 Chrome DevTools 的 Device Mode 打造移动设备优先的完全自适应式网站

该模式不可替代真实设备测试

切换 Device Mode 按钮可以打开或关闭 Device Mode

选择设备

通过该视图控件,你可以设定下面两种模式:

  1. 自适应。 使视口可以通过任意一侧的大手柄随意调整大小

  2. 特定设备。 将视口锁定为特定设备确切的视口大小,并模拟特定设备特性

媒体查询

媒体查询是自适应网页设计的基本部分。要查看媒体查询检查器,请在三圆点菜单中点击 Show Media queries。DevTools会在样式表中检测媒体查询,并在顶端标尺中将它们显示为彩色条形

用彩色标记的媒体查询示例如下:

快速预览媒体查询

点击媒体查询条形,调整视口大小和预览适合目标屏幕大小的样式

查看关联的 CSS

右键点击某个条形,查看媒体查询在 CSS 中何处定义并跳到源代码中的定义

元素面板(Elements)

使用元素面板可以自由的操作DOM和CSS来迭代布局和设计页面

编辑样式

使用 Styles 窗格可以修改与元素关联的 CSS 样式

添加、启用和停用 CSS 类

点击 .cls 按钮可以查看与当前选定元素关联的所有 CSS 类。 从这里,您可以执行以下操作:

  • 启用或停用当前与元素关联的类

  • 向元素添加新类

添加或移除动态样式(伪类)

您可以在元素上手动设置动态伪类选择器(例如 :active、:focus、:hover 和 :visited)

可以通过两种方式在元素上设置动态状态:

  • 在 Elements 面板内右键点击某个元素,然后从菜单中选择目标伪类,将其启用或停用

  • 在 Elements 面板中选择元素,然后在 Styles 窗格中点击 :hov 按钮,使用复选框启用或停用当前选定元素的选择器

快速向样式规则添加背景色或颜色

Styles 窗格提供了一个用于向样式规则快速添加 text-shadow、box-shadow、color 和 background-color 声明的快捷方式

样式规则的右下角有一个由三个点组成的图标。您需要将鼠标悬停到样式规则上才能看到这个图标

将鼠标悬停到此图标上可以调出添加 text-shadow、box-shadow、color 和 background-color 声明的快捷方式。

使用 Color Picker 修改颜色

要打开 Color Picker,请在 Styles 窗格中查找一个定义颜色的 CSS 声明(例如 color: blue)。 声明值的左侧有一个带颜色的小正方形。 正方形的颜色与声明值匹配。 点击小正方形可以打开 Color Picker

您可以通过多种方式与 Color Picker 交互:

  1. 取色器。 通过鼠标悬停到某种颜色上去获取颜色值。

  2. 当前颜色。 当前值的可视表示。

  3. 当前值。 当前颜色的十六进制、RGBA 或 HSL 表示。

  4. 调色板。  当前生成的几组颜色。

  5. 着色和阴影选择器。

  6. 色调选择器。

  7. 不透明度选择器。

  8. 颜色值选择器。 点击可以在 RGBA、HSL 和十六进制之间切换。

  9. 调色板选择器。 点击可以选择不同的模板。

 

编辑 DOM

Elements 面板中的 DOM 树视图可以显示当前网页的 DOM 结构。通过 DOM 更新实时修改页面的内容和结构

 

隐藏 DOM

两种方式:

  • 右键选择某个元素,然后选择 Hide element

  • 选中某个元素,然后使用快捷键 H

设置 DOM 断点

设置 DOM 断点以调试复杂的 JavaScript 应用。例如,如果您的 JavaScript 正在更改 DOM 元素的样式,请将 DOM 断点设置为在元素属性修改时触发。在发生以下一种 DOM 更改时触发断点:子树更改、属性更改、节点移除

子树修改

设置子树修改断点:右键选择某个元素,然后选择 Break on --> subtree modifications

添加、移除或移动子元素时将触发子树修改断点。例如,如果您在 main-content 元素上设置子树修改,以下代码将触发断点:

var element = document.getElementById('main-content');
//modify the element's subtree.
var mySpan = document.createElement('span');
element.appendChild( mySpan );
属性修改

设置属性修改断点:右键选择某个元素,然后选择 Break on --> attribute modifications

动态更改元素的属性 (class, id, name) 时将发生属性修改:

var element = document.getElementById('main-content');
// class attribute of element has been modified.
element.className = 'active';
节点移除

设置节点移除断点:右键选择某个元素,然后选择 Break on --> node removal

从 DOM 中移除有问题的节点时将触发节点移除修改:

document.getElementById('main-content').remove();

查看元素事件侦听器

在 Event Listeners 窗格中查看与 DOM 节点关联的 JavaScript 事件侦听器

启用 Ancestors 复选框时查看祖先实体事件侦听器,即除了当前选定节点的事件侦听器外,还会显示其祖先实体的事件侦听器

启用 Framework listeners 复选框时查看框架侦听器,DevTools 会自动解析事件代码的框架或内容库封装部分,然后告诉您实际将事件绑定到代码中的位置

控制台面板(Console)

在开发期间,可以使用控制台面板记录诊断信息,或者使用它作为 shell 在页面上与 JavaScript 交互

消息堆叠

如果一条消息连续重复,而不是在新行上输出每一个消息实例,控制台将“堆叠”消息并在左侧外边距显示一个数字。此数字表示该消息已重复的次数

如果您倾向于为每一个日志使用一个独特的行条目,请在 DevTools 设置中启用 Show timestamps

由于每一条消息的时间戳均不同,因此,每一条消息都将显示在各自的行上

选择执行环境

以下屏幕截图中以蓝色突出显示的下拉菜单称为 Execution Context Selector

通常,您会看到此环境设置为 top(页面的顶部框架)。

其他框架和扩展程序在其自身的环境中运行。要使用这些其他环境,您需要从下拉菜单中选中它们。 例如,如果您要查看