这是我参与「第四届青训营 」笔记创作活动的的第3天
1. 前端Debug特点
- 多平台:浏览器、Hybrid、NodeJs、小程序,桌面应用...
- 多环境:本地开发环境 , 线上环境
- 多工具:Chrome devTools,Charles,Spy-Debugger...
- 多技巧:控制台输出,设断电,SourceMap,代理...
2. 浏览器调试工具 DevTools
谷歌浏览器的开发者工具,可以在页面上右键 ---> 检查工具打开DevTool
,或者直接F12键打开。
下面介绍一下常用工具的用法 :
2.1. Elements (元素)
- 点击.cls开启动态修改元素的class
- 输入字符串可以动态的给元素添加类名
- 勾选/取消类名可以动态的查看类名生效效果
- 点击具体的样式值(字号、颜色、宽度高度等)可以进行编辑,浏览器内容区域实时预览
- Computed下点击样式里的箭头可以跳转到styles面板中的CSS规则
强制激活伪类 (用于观察DOM悬浮等效果)
- 选中具有伪类的元素, 点击右侧
:hov
;- DOM树右键菜单,选择
Force State
.
2.2. Console (日志面板)
Console.log
在控制台打印信息。你可以在这个方法中传入一个或多个对象,每个对象会通过计算后加入一串使用空格分隔的字符串。传入的第一个参数可能会包含格式说明符号,该说明符号由一个百分号(%)后加一个代表需要被替换内容的字母。
占位符 给日志添加样式,可以突出重要的信息
%s:字符占位符;%o:对象占位符;%c:样式占位符;%d;数字占位符
// %s 字符串
// %d or %i 整数
// %f 浮点数
// %o 可扩展DOM元素(在element面板一样)
// %O 可扩展javascript元素
// %c 根据提供的css样式输出字符串
console.log("hello world", 1, true);
// hello world 1 true
console.log("%s > %d ", "100", 50);
// 100 > 50
console.log("%s > %d ", "100", "50");
// 100 > NaN
console.log("%s > %f ", "100", 50.2);
// 100 > 50.2
console.log("%O is a object", {a:"1"});
// Object{/*object*/} is a object
console.log("%o is a element", document.body);
// <body>...</body> html元素
console.log("%O is a element", document.body);
// DOM对象(body)
console.log("%c hello world", "background:black; color:white");
// hello world(白字黑背景)
Console.warn
以警告的格式打印信息。
Console.error
以报错的格式打印信息,并且在调用列出产生堆栈跟踪。
Console.info
以信息的格式打印信息。左侧可以选择等级,对日志进行分类查看
Console.table
具象化地展示JSON和数组数据
Console.dir
可以展示对象中的属性和对应的值
2.3. Source Tab
Source面板展示页面的源文件信息,帮助我们查看具体的报错信息
- 左 文件结构
- 中 文件源码
- 右 工具栏
2.4. Performance
当我们对网站性能要求比较高的时候,可以在performance面板中查看没一帧。每一毫秒中执行了什么,汇总信息查看加载某一个模块花费了多少时间
- fps 每秒帧数
- cpu 处理各个任务花费的时间
- net 各个请求花费时间
- frames 帧线程
- main 主线程 负责执行JavaScript 解析HTML/CSS 完成绘制
- Raster raster线程 负责完成某个layer或者某些块(tile)的绘制
- 统计面板
2.5. NetWork
可以选择当前调试的网速
2.6. Application
Application面板展示与本地存储相关的信息:
- Local Storage
- Session Storage
- IndexedDB
- Web SQL
- Cookie