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

动态修改元素和样式

• 按下F12或者右键后点击检查即可打开工具

• 选择元素一栏即可看到页面的HTML代码

• 点击左上角按钮后拖动鼠标，工具中就会标识鼠标位置元素对应的HTML元素；也可以直接点击HTML元素，页面同样会标识出对应的页面元素

• 选择想要调试的元素之后，点击.cls开启动态修改元素的class：输入字符串可以动态地给元素添加类名，勾选/取消类名可以动态地查看类名生效效果

• 点击具体的样式值（字号、颜色、宽度高度等）可以进行编辑，浏览器内容区域实时预览

• 已计算下点击样式里的箭头可以跳转到styles面板中的css规则

控制台(console)

可以通过在代码中添加一些输出语句，来检查一些难以直接看到的数据

• 点击控制台一栏

有多种不同的输出类型

• console.log
• console.warn
• console.error
• console.debug
• console.info
• console.time
• console.table 具象化地展示JSON和数组数据
• console.dir 通过类似文件树的方式展示对象的属性
• 占位符：给日志添加样式，可以突出重要的信息
  • %s 字符串占位符
  • %o 对象占位符
  • %c 样式占位符
  • %d 数字占位符
• 左侧可以选择等级，对日志进行分类查看

console.log("bytedance")
console.warn("bytedance")
console.error("bytedance")
console.debug("bytedance")
console.info("bytedance")
console.log("%s %o,%c%s", "hello", {name: "Tom", age: 18}, "font-size: 24px; color: red;", "Welcome to bytedance!")

源代码(Source Tab)

• 选择源代码一栏即可打开

• 从左往右依次为
  • 页面资源文件树
  • 代码预览区域
  • 断点调试器
• 使用关键字debugger或代码预览区域的行号可以设置断点
• 执行到断点处时代码暂停执行
• 展开断点列表可以查看，勾选/取消可以激活/禁用对应断点
• 暂停状态下，鼠标移到变量上可以查看变量的值
• 在调试器监视右侧点击+可以添加对变量的监控，查看该变量的值
• (同许多编译器的断点调试大致一样，就不做过多演示了)