LOADING

浏览器调试

2024/2/7

元素面板（Element）

左侧 DOM 树

左侧为 DOM 元素树，支持多种操作，如编辑、删除、新增、复制 DOM 元素，更多可查看右键菜单。

鼠标选择 dom 元素，蓝色表示本体部分，绿色表示 padding,橘黄色表示 margin

搜索 dom 节点，搜索到的节点会被高亮显示

ctrl+f 打开搜索
搜索方式一：//section/p        //表示全局
搜索方式二：直接搜内容，会匹配名字相同的
搜索方式三: 节点选择器

右键属性有各种方法可以使用

发生中断的条件：可以在代码更改的时候强行断点断住

复制:可以复制元素，可以复制样式等

右侧菜单

右侧菜单选项里的内容对应的都是当前选中的元素

样式

选中元素的样式，可编辑、添加 CSS 样式，实时预览。

可以给某个元素增加新类或者取消

可以修改应用的 css 类属性以及增加新的类，方便测试

可以激活伪类，可以搜索

这个用户代理样式表(user agent stylesheet)表示浏览器给我们的样式

如果有继承样式，也可以查看是从哪里继承过来的

可以查看源代码

可视化编辑器

可视化的颜色、贝塞尔曲线、阴影编辑器，所见即所得

  • 颜色编辑器：只要是颜色属性，都可以点击色块按钮可视化编辑颜色，支持拖动设置颜色、取色、设置对比度。
  • Grid、Flex 布局编辑器：当使用弹性布局 Grid、Flex 时，支持可视化编辑布局对齐方式。
  • 阴影编辑器：阴影 shadow 属性上，会出现编辑器按钮，可视化编辑阴影效果。

  • 贝塞尔曲线编辑器：在动画 transition、animation 中会用到贝塞尔曲线函数（缓动函数）。

计算样式

可以看一个 dom 被渲染时候的实际属性，所有的属性都会有值(层叠样式)，总之，一个元素的所有 css 属性值都必须有值；还有一张图，可以直观展示 padding,margin,content 的大小；还可以进行搜索和筛选

点小箭头可以找到是哪句 css 导致他生效的

还可以查看字体

布局

grid 布局,flex 布局调试

可以勾选会进行高亮，方便查看和调试

也可以通过左侧 dom 树的小标来打开和关闭

事件监听器

可以查看当前这个元素上挂载的事件，也可以勾选查看所有祖先的监听，也可以移除，也可以进入到源码。

framework 监听器？

DOM 断点

选中 DOM 元素，右键设置中断点，可以在元素更改（JS 代码修改 DOM）时触发断点。

添加后可以在源代码中查看到已添加的 DOM 断点，或者元素面板中的“DOM 断点”。

属性

查看一个节点的所有属性

控制台面板（Console）

主要功能就是调试 JavaScript 代码

运行代码

可执行任意 JS 代码，包括调用页面已有的 JS 对象、函数。

在里面输入 js 代码回车运行以后会运行 js 代码，同时打印出返回值

快捷命令

输入$_可以返回上一条语句输出的结果

输入$0 可以获得当前选中的 DOM 节点，$1 是上次,$2 是上上次

console 输出

代码中的 Console、异常错误都会在这里输出。

console 函数

用 console 函数输出变量，是比较常用的调试技巧，console 的常用函数：

console函数 说明
console.log(str) 控制台输出一条消息
console.error(str); 打印一条错误信息，类似的还有 info、warn
console.table(data [, columns]) 将数据以表格的形式显示，很实用，data 为数组或对象，第二个参数（数组）可指定输出的列
console.dir(object) 树形方式打印对象，特别是 DOM 对象非常实用
console.assert(false, ‘false’) 断言输出，为 false 才会输出
console.trace() 输出当前位置的执行堆栈，用断点会更实用一些。
console.time(label) 计时器，可用来计算耗时（毫秒），三个函数配合使用：time(开始计时) > timeLog(计时) > timeEnd(结束)
console.clear() 清空控制台，并输出 Console was cleared。

监听函数

通过如下（调试工具）的全局函数可监听一个函数、事件的执行。

函数 说明
monitor( function ) 监听一个函数，当被监听函数执行的时候，会打印被调用信息
monitorEvents ( event ) 监听一个事件，当事件被触发时打印触发事件日志

活动表达式

一个不错的小功能，点击下图中的眼睛图标，相当于添加了一个动态表达式，然后实时监控（显示）该表达式的值。

源代码面板（Sources）

管理网页所有的源代码文件，包括 JS、CSS、图片等资源，经常就是在这里断点调试 JS 代码

在调试模式下可以查看（鼠标悬浮在变量上）变量值、上下文作用域、函数调用堆栈信息。

  • ① 页面资源目录：页面涉及的所有资源（树）。
  • ② 源代码：文件源代码，可以在这里添加断点调试 JS 代码，如果想编辑在线 JS 代码，也是可以的，详见后文。
  • ③ Debug 工具栏：断点调试的操作工具，可以控制暂停、继续、单步、执行代码。

  • ④ 断点调试器：这里包含多个断点调试器（展示断点的信息）
  • 监视（Watch）：可添加对变量的监视。
  • 断点（Breakpoints）：所有添加的断点，可在这里编辑、删除管理。
  • 作用域（Scope）：当前代码上下文的作用域，含闭包。
    • Local**本地作用域：代码当前 {} 内存在的变量，this**就可以在这里找到。
    • **Closure****闭包作用域**：代码当前所处闭包里的变量。注意名称后用括号注明了这是哪个闭包里的内容，因为闭包可以嵌套，所以可能出现多个 Closure 作用域。
    • **Script****代码标签作用域**：当前