前端开发调试工具笔记 | 青训营笔记

YWuHuang
110 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的第12天

前端开发调试笔记

特点：

  • 多平台：浏览器、Hybrid、NodeJs、小程序、桌面程序
  • 多环境：本地开发环境、线上环境
  • 多工具：chrome devTools、Charles、Spy-Debugger\Whistle\vConsole····
  • 多技巧：Console、BreakPoint、sourceMap、代理···

Chrome DevTools笔记

Chrome DevTools是我认为最便捷、最实用的前端开发。

动态修改元素和样式

  • 点击.cls按钮开启动态修改元素的class

image.png 在图片对勾的位置输入字符串则可以给元素添加类名。

  • 勾选/取消类名可以动态的查看类名生效效果。

image.png

  • 点击具体的样式值可以进行编辑，浏览器内容区域实时预览。（图片红框选择区域，蓝框编辑）

image.png

  • Comouted下点击样式中的箭头可以跳转到styles面板中的css规则。 image.png

激活伪类的两种方式：

  • 选中具有伪类的元素，点击 :hov
  • DOM树右键菜单，选择Force State

-方法一 image.png -方法二： image.png

Console笔记

  • 点击红框console进入console页面

  • 左侧黄框可以选择等级，对日志进行分类查看（console.log、console.warn、console.error、console.debug、console.info） image.png

  • console.table:具象化展示JSON和数组数据

  • console.dir:通过类似文件树的方式展示对象的属性

  • 占位符：给日志添加样式，可以突出重要的信息；

比如：

  • %s：字符串占位符；
  • %o：对象占位符
  • %d：数字占位符；

Sorce Tab

  • 红框区：页面资源文件目录树
  • 黄框区：代码预览区域
  • 蓝框区：Debug工具栏
  • 绿框区：断点调试器 image.png 蓝框区debug工具栏从左到右依次为：
  • 暂停/继续
  • 单步跳过
  • 进入函数
  • 跳出函数
  • 单步执行
  • 激活/关闭 所以断点
  • 代码执行异常处自动

Break Point和Watch

  • 使用关键字debugger或者代码预览区域（红框位置）的行号可以设置断点
  • 执行到断点处的代码停止执行

image.png

  • 展开Breakpoints列表可以查看断点列表，勾选/取消可以 激活/禁用对应断点 image.png
  • 暂停状态下，鼠标hover变量可以查看变量的值
  • 在调试器Watch右侧点击+可以添加对变量的监控，查看该变量的值。

Scope和Call Stack

  • 展开Scope可以查看作用域列表（包含闭包）
  • 展开Call Stack可以查看当前JavaScript代码的调用栈。
avatar
文章
阅读
粉丝