这是我参与「第四届青训营 」笔记创作活动的第4天
Chorme DevTools
浏览器右键点击检查打开Chorme调试工具
Element
动态修改元素和样式
-
点击.cls开启动态修改元素的class
-
勾选/取消类名可以动态的查看类名生效效果
-
输入字符串可以动态的给元素添加类名
-
点击具体的样式值(字号、颜色、宽度高度等)可以进行编辑，浏览器内容区域实时预览
-
可以用以下两种方式强制激活伪类
-
DOM树右键菜单，选择Force State
-
选中具有伪类的元素，点击：hov
-
-
Computed下点击样式里的箭头可以跳转到styles面板中的css规则
-
跳转到：
其他功能
- body右键点击Capture node screenshot可截屏
Console
展示日志
-
console.log--打印一个日志
-
console.warn--打印一个警告
-
console.error--打印一个错误
-
console.debug--打印一个调试
-
console.info
-
占位符--给日志添加样式，可以突出重要的信息
- %s:字符串占位符
- %o:对象占位符
- %c:样式占位符
- %d:数字占位符
-
console.table--具象化展示JSON和数组数据
-
console.dir--通过类似文件树的方式展示对象的属性
Source Tab
调试、展示项目源代码
Break Point与Watch
- 使用关键字debugger或代码预览区域的行号可以设置断点
- 执行到断点处时代码暂停执行
- 展开Breakpoint列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
- 暂停状态下，鼠标hover变量可以查看变量的值
- 在调试器Watch右侧点击+可以添加对变量的监控，查看该变量的值
- 在Breakpoints展示所有断点值
Scope与Call Stack
- 展开Scope可以查看作用域列表(包含闭包)
- 展开Call Stack可以查看当前JavaScript代码的调用栈
02-4 Network
02-5 Application
Application面板展示与本地存储相关的信息
- Local Storage
- Session Storage
- IndexdDB
- Web SQL
- Cookie
