AXZ博客
给你海洋的知识 AXZLK.COM!

怎么设置google断点调试(js设置断点调试步骤)

本文介绍的 Chrome 开发者工具基于 Chrome 65 版本。 如果您的 Chrome 开发者工具没有下面提到的内容,请检查 Chrome 的版本

介绍

Chrome Developer Tools 是谷歌浏览器内置的一套网页开发和调试工具,可以用来迭代、调试和分析网站

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

Chrome Developer Tools主要包括以下10个部分:

Device toolbar Elements Console Console Sources Network Network Performance Performance Memory Memory Application Security Security 主菜单(自定义和控制DevTools) 设备模式(设备工具栏)

使用 Chrome DevTools 的设备模式创建一个完全响应的移动优先网站

此模式不能替代真机测试

切换设备模式按钮以打开或关闭设备模式

设置断点之后不能调试_js设置断点调试步骤_怎么设置google断点调试

选择设备

js设置断点调试步骤_设置断点之后不能调试_怎么设置google断点调试

使用此视图控件,您可以设置以下两种模式:

自适应的。 使视口可针对两侧带有大手柄的特定设备自由调整大小。将视口锁定为特定设备的确切视口大小并模拟特定于设备的媒体查询

媒体查询是响应式网页设计的基本组成部分。 要查看媒体查询检查器,请单击三点菜单中的显示媒体查询。 DevTools 检测样式表中的媒体查询并将它们显示为顶部标尺中的彩色条

设置断点之后不能调试_js设置断点调试步骤_怎么设置google断点调试

颜色编码的媒体查询示例如下:

js设置断点调试步骤_设置断点之后不能调试_怎么设置google断点调试

快速预览媒体查询

单击媒体查询栏以调整视口大小和预览样式以适应目标屏幕大小

查看关联的 CSS

右击某个栏可以看到媒体查询在CSS中定义的位置怎么设置google断点调试,并跳转到源代码中的定义

元素面板(元素)

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

编辑样式

使用样式面板修改与元素关联的 CSS 样式

添加、启用和禁用 CSS 类

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

js设置断点调试步骤_设置断点之后不能调试_怎么设置google断点调试

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

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

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

js设置断点调试步骤_设置断点之后不能调试_怎么设置google断点调试

设置断点之后不能调试_js设置断点调试步骤_怎么设置google断点调试

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

“样式”窗格提供了一种快捷方式,可用于快速向样式规则添加文本阴影、框阴影、颜色和背景颜色声明

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

设置断点之后不能调试_js设置断点调试步骤_怎么设置google断点调试

将鼠标悬停在此图标上可显示用于添加文本阴影、框阴影、颜色和背景颜色声明的快捷方式。

使用拾色器修改颜色

要打开拾色器,请在样式窗格中查找定义颜色(例如,颜色:蓝色)的 CSS 声明。 申报价值左侧有一个彩色小方块。 正方形的颜色与申报价值相符。 点击小方块打开拾色器

怎么设置google断点调试_设置断点之后不能调试_js设置断点调试步骤

您可以通过多种方式与拾色器交互:

js设置断点调试步骤_设置断点之后不能调试_怎么设置google断点调试

选色器。 通过将鼠标悬停在颜色上来获取颜色值。 当前颜色。 当前值的直观表示。 当前值。 当前颜色的十六进制、RGBA 或 HSL 表示形式。 调色板。 当前生成的颜色集。 阴影和阴影选择器。 色调选择器。 不透明度选择器。 颜色值选择器。 单击可在 RGBA、HSL 和十六进制之间切换。 调色板选择器。 单击以选择不同的模板。 编辑 DOM

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

隐藏DOM

两种方式:

设置 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

当元素的属性(类、id、名称)动态更改时,会发生属性修改:

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复选框时查看Ancestors事件监听器,即除了当前选中节点的事件监听器外,还会显示其祖先实体的事件监听器

View framework listeners 当 Framework listeners 复选框启用时,DevTools 会自动解析事件代码的框架或内容库包装器部分,然后告诉你事件实际绑定在代码中的哪个位置

控制台面板(Console)

在开发过程中,您可以使用控制台面板来记录诊断信息怎么设置google断点调试,或者将其用作 shell 与页面上的 JavaScript 进行交互

消息栈

如果消息连续重复,而不是在新行上打印消息的每个实例,控制台将“堆叠”消息并在左边距显示一个数字。这个数字表示消息重复了多少次

js设置断点调试步骤_怎么设置google断点调试_设置断点之后不能调试

如果您更喜欢为每个日志使用唯一的行条目,请在 DevTools 设置中启用显示时间戳

怎么设置google断点调试_设置断点之后不能调试_js设置断点调试步骤

由于每条消息都有不同的时间戳,因此每条消息都会出现在自己的行中

js设置断点调试步骤_设置断点之后不能调试_怎么设置google断点调试

选择执行环境

以下屏幕截图中以蓝色突出显示的下拉菜单称为执行上下文选择器

怎么设置google断点调试_设置断点之后不能调试_js设置断点调试步骤

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

其他框架和扩展在它们自己的环境中运行。 要使用这些其他环境,您需要从下拉菜单中选择它们。 例如,如果您要查看某个元素的日志输出,并修改该环境中存在的变量,则需要从“执行上下文选择器”下拉菜单中选择该元素。

控制台默认为顶级环境,除非您通过检查另一个环境中的元素来访问 DevTools。例如,如果您检查其中一个

元素,然后 DevTools 将执行上下文选择器设置为其环境。

当您在 top 以外的上下文中工作时,DevTools 会以红色突出显示执行上下文选择器,如下面的屏幕截图所示。 这是因为开发人员很少需要在 top 以外的任何环境中进行操作。输入一个变量,期望返回一个值,只是为了查看该变量是否未定义(因为该变量是在不同的环境中定义的)可能会非常混乱

源代码面板 (Sources)

在源代码面板中设置断点来调试 JavaScript,或者通过 Workspaces(工作区)连接到本地文件以使用开发者工具的实时编辑器

格式化混淆代码

在某些情况下,我们需要对混淆代码进行一些调试,但这是我们看到的一团乱码,根本没有格式化:

然后我们可以点击下方的格式化按钮,对代码进行格式化:

断点调试行断点

当我们知道需要调试的代码的确切位置时,使用行断点

DevTools 设置代码行断点:

单击源选项卡。 打开包含要调试的代码行的文件。 找到那行代码。 点击左侧的行号,行号上会显示一个蓝色图标,表示为该行代码设置了断点。

当然你也可以使用调试器在代码中设置代码行断点,效果和在DevTools中设置是一样的:

console.log('a');
console.log('b');
debugger;
console.log('c');

条件代码行断点

当我们知道需要调试的代码的确切位置并且只有在满足条件时才进行调试时,使用条件代码行断点

设置条件代码断点行:

单击源选项卡。 打开包含要调试的代码行的文件。 找到那行代码。 右键单击左侧的行号。 选择添加条件断点。 代码行下方会出现一个对话框。 在对话框中输入您的条件。 按 Enter 激活断点。 橙色图标出现在行号上。

DOM 改变断点

当您想要更改 DOM 节点或其子节点的代码时,使用 DOM 更改断点

设置 DOM 更改断点:

切换到元素面板。 找到要设置断点的元素并右键单击它。 将鼠标悬停在 Break on 上并选择子树修改、属性修改或节点移除。

XHR断点

当XHR请求URL包含指定字符串时,如果要断,使用XHR断点

设置 XHR 断点:

单击源选项卡。 展开 XHR 断点窗格。 单击添加断点。 输入要断开的字符串。 当此字符串出现在 XHR 的请求 URL 中的任何位置时,DevTools 会暂停。 按 Enter 确认。

事件侦听器断点

当您想暂停事件侦听器代码时使用事件侦听器断点

设置事件侦听器断点:

单击源选项卡。 展开事件侦听器断点窗格。 DevTools 显示事件类别列表,例如动画。 检查这些类别之一以暂停该类别的任何事件,或展开类别并检查特定事件。

异常断点

当您想在抛出捕获或未捕获异常的代码行上暂停时使用异常断点

设置异常断点:

单击源选项卡。单击暂停

,启用后变为蓝色。 (可选)如果除了未捕获的异常之外还想在捕获的异常上暂停,请选中“在捕获到的异常时暂停”复选框。

函数断点

调用debug(functionName)对函数functionName进行断点调试

function sum(a, b) {
  let result = a + b; // DevTools pauses on this line.
  return result;
}
debug(sum); // Pass the function object, not a string.
sum();

待续…参考

赞(0)
未经允许不得转载:AXZ博客 » 怎么设置google断点调试(js设置断点调试步骤)
分享到

评论 抢沙发

登录

找回密码

注册