前端必须知道的开发调试知识| 青训营笔记

241 阅读3分钟

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

1. 前端Debug特点

  1. 多平台:浏览器、Hybrid、NodeJs、小程序,桌面应用...
  2. 多环境:本地开发环境 , 线上环境
  3. 多工具:Chrome devTools,Charles,Spy-Debugger...
  4. 多技巧:控制台输出,设断电,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