f12一些调试功能

小tips, 遇到的问题集合 本文总阅读量次

记录一些常用的f12调试功能

element元素

  • 给元素添加断点：在元素中可以直接右键选择在子树修改/属性修改/删除节点的时候打断点
    • 设置的断点可在右侧“DOM断点”中查看

network网络

  • 禁用缓存： 开发时可根据需要勾上
  • 调节网速： “无限制”/“已停用节流模式”处调整
  • 上半部分 网络，下半部分 源代码搜素+控制台打印： 把 全局搜索（Ctrl + Shift + F） 打开就行，那可太方便了

修改请求参数并重新发送

  • edge浏览器修改请求参数并重新发送参考文章
  • 使用场景： pdd解密的接口传参偶尔出现问题，想测试下是不是缺少某个请求参数导致的报错，但是代码比较复杂，直接从f12操作先定位问题所在就方便许多
    • postman对这种pdd平台解密不太好使
  • 使用步骤：
    • 网络-fetch/XHR-左键选中一个请求-右键复制 复制为fetch-在控制台中粘贴后修改参数-enter发送请求
  • fetch 是javascript中一个网络请求的函数或者工具，Edge/Chrome在我们 Copy as fetch 的时候帮我们把请求的各种参数转换成了使用 fetch 请求的代码，所以我们可以直接在控制台上直接执行从而达到请求重放的效果

console控制台

  • 可以在这执行js语句

js代码换行

  • console中输入的代码都是立即执行的，回车就执行。
  • javascript代码中没有一般意义上的“行”的概念，分号才是真正的换行标志，所以如果你想输入多行代码，可以用分号隔开，如 a=1; b=2
  • 一定要换行，可以按shift+Enter

console对象

  • console对象用于js调试，但不是js原生对象，它是宿主对象，即浏览器提供的内置对象
  • 注意： [《console.log直接打印的对象值是变化的》]

支持printf的占位符格式

  • 支持的占位符有：字符（%s）、整数（%d或%i）、浮点数（%f）、对象（%o或%O）还有css格式化字符串（%c）
  • 理解：将后面的变量赋值给了前面的占位符的位置，他们是一一对应的。这种写法在复杂的输出时，能保证模板和数据分离，结构更加清晰
  • *最常用的： 是%c，可以让log颜色鲜明起来
  • 例子可见菜鸟教程
占位符 作用
%s 字符串
%d or %i 整数
%f 浮点数
%o 可展开的DOM(像在开发者工具Element面板那样例子)
%O 列出DOM的属性(像JS对象那样访问DOM元素,log+%O等同于console.dir)
%c 根据提供的css样式格式化字符串 
1
2
3
4
5
6
7
8
9
10
console.log("%d年%d月%d日",2011,3,26); // 2011年3月26日

// 格式成可展开的的DOM，像在开发者工具Element面板那样可展开 
console.log('%o',document.body.firstElementChild); 
// 像JS对象那样访问DOM元素，可查看DOM元素的属性 
// 等同于console.dir(document.body.firstElementChild) 
console.log('%O',document.body.firstElementChild);

console.log("%c菜鸟教程！","color: red; font-size: 20px"); 
//输出红色的、20px大小的字符串：菜鸟教程,欢迎您！

除log外常用的方法

除了clear()、table()，其他方法在Web Worker中可用 ————可参考MDN

方法 描述 实例
assert() assert方法接受两个参数，第一个参数是表达式，第二个参数是字符串。只有当第一个参数为false，才会输出第二个参数，否则不会有任何结果。 console.assert(true === false, “判断条件不成立”)
// Assertion failed: 判断条件不成立
clear() 清除当前控制台的所有输出，将光标回置到第一行 console.clear()
count() 用于计数，输出它被调用了多少次。 (function() {
  for (var i = 0; i < 5; i++) {
    console.count(‘count’);
  }
})();
error() 输出信息时，在最前面加一个红色的叉，表示出错，同时会显示错误发生的堆栈。 console.error(“Error: %s (%i)”, “Server is not responding”,500)
group() 用于将显示的信息分组，可以把信息进行折叠和展开。 console.group(‘第一层’);
console.group(‘第二层’);

  console.log(‘error’);
  console.error(‘error’);
  console.warn(‘error’);

console.groupEnd();
console.groupEnd();
groupCollapsed() 与console.group方法很类似，唯一的区别是该组的内容，在第一次显示时是收起的（collapsed），而不是展开的。 console.groupCollapsed(‘第一层’);
console.groupCollapsed(‘第二层’);

  console.log(‘error’);
  console.error(‘error’);
  console.warn(‘error’);

console.groupEnd();
console.groupEnd();
groupEnd() 结束内联分组 console.group(‘Group One’);
console.group(‘Group Two’);

// some code

console.groupEnd(); // Group Two 结束
console.groupEnd(); // Group One 结束
info() console.log 别名，输出信息 console.info(“runoob”)
log() 输出信息 console.log(“runoob”)
table() 将复合类型的数据转为表格显示。 var arr= [
  { num: “1”},
  { num: “2”},
  { num: “3” }
];
console.table(arr);

var obj= {
  a:{ num: “1”},
  b:{ num: “2”},
  c:{ num: “3” }
};
console.table(obj);
time()、timeEnd() 计时功能 console.time(‘计时器1’);
console.timeEnd(‘计时器1’);

dir显示对象属性

  • console.dir(obj)： 显示指定 JavaScript 对象的属性列表
  • 注意：
    • 内部除了对象啥都不能放，否则无法正常展示
    • 和log一样，展示的是对象引用，不一定是放置console位置当下的对象属性值（可打断点避免这个问题）

trace追踪函数的调用轨迹

  • [console.trace()](https://www.runoob.com/jsref/met-console-trace.html)： 可以查看函数体中设置了console.trace的函数是如何被一步一步执行到console.trace位置的
  • 对逻辑很复杂的情况就可以直接在目标函数内写个console.trace，不用一步一步打断点来观察
  • 注意： 处在异步中会出现无法追踪的情况，复杂函数基本都是async-await，然而并无法使用。
    • 解决方法：
      • 可以console.error，它会打印函数的调用栈，在打印出的堆栈中可以找到调用路径
      • 也可以在“源代码”中打断点，可在右侧“调用堆栈”中查看调用路径
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/*函数是如何被调用的，在其中加入console.trace()方法就可以了*/
function add(a,b){
  console.trace();
  return a+b;
}
var x = add3(1,1); 
function add3(a,b){return add2(a,b);}
function add2(a,b){return add1(a,b);}
function add1(a,b){return add(a,b);}

/* 指明了add函数是如何被触发的
console.trace
add	@	VM258:3 // 指向add中console.trace()所在行
add1	@	VM258:11 // 指向函数add1中add(a,b)所在行
add2	@	VM258:10 // 指向函数add2中add1(a,b)所在行
add3	@	VM258:9 // 指向函数add3中add2(a,b)所在行
(匿名)	@	VM258:6 // 指向var x = add3(1,1); 
*/

count次数器+countReset重置次数器

time+timeLog+timeEnd计时功能

  • time()、timeLog()、timeEnd()

    该特性是非标准的，请尽量不要在生产环境中使用它！

  • 显示代码的运行时间
1
2
3
4
5
6
7
8
console.time("控制台计时器一");
for(var i=0;i<1000;i++){
  for(var j=0;j<1000;j++){}
  // console.timeLog("控制台计时器一");
}
console.timeEnd("控制台计时器一");

// 控制台计时器一: 5.315185546875 ms

table表格形式显示数组/对象

  • console.log(data, columns)
  • 默认会把所有元素罗列在每一列，但可以使用 columns 参数选择要显示的列的子集，以此**隐藏部分列**
  • 注意：列数太多时可能出现不生效的情况，需要提前处理下数据
1
2
3
4
5
6
7
8
9
10
const arr = [
    {
        "code": "ON-DELIVERY",
        "nameZh": "寄付"
    },
    {
        "code": "MONTHLY",
        "nameZh": "月结"
    }
]
1
console.table(arr)
(索引) code nameZh
1 ‘ON-DELIVERY’ ‘寄付’
2 ‘MONTHLY’ ‘月结’ 
1
console.table(arr, ['code'])
(索引) code
1 ‘ON-DELIVERY’
2 ‘MONTHLY’

sources源代码

  • 可以查看到当前网页的所有源文件 包括：样式、css、图片、js 文件等。在左侧栏中可以看到源文件以树结构进行展示
  • 在“搜索”中输入代码，可以看到相关的本地代码
    • 可以把 全局搜索（Ctrl + Shift + F） 打开
    • 注意：生产环境中可点击左下角{}格式化代码，方便查看
  • 打断点：在源中的代码里可以直接打断点
    • 右键可选择添加条件断点/Logpoint打印日志到控制台（不中断）
    • 打断点后可在右侧“调用堆栈”中查看到是如何通过各个函数一步步调用到当前位置的

应用/应用程序

查看/清除缓存

  • 存储中包含本地存储、会话存储、Cookie

Vue

  • 可以改一些数据看效果

调试hover等状态

  • 方法1：F12-element-找到对应元素标签-右键-强制状态-可选择:hover、:focus等状态
  • 方法2：F12,鼠标悬浮到目标元素=>点击鼠标右键，界面出现菜单，此时不要用鼠标=>将鼠标移动到开发者控制台，找到目标元素
  • 方法3：F12=>鼠标悬浮到目标元素=>键盘输入“ctrl+shift+c”可以调出f12的小箭头
  • 方法4：F12=>元素=>选中该元素=>在“样式”中选:hov=>强制元素状态

调试生产环境

生产环境的问题调试需要一点小技巧

格式化源代码

  • 发现报错以后点击报错，进入的f12源代码如果是一行的，此时可点击左下角的{}Pretty print进行格式化，从而帮助定位问题

本地连生产环境域名进行测试

  1. 项目配置文件中，连接后端服务的ip位置换为生产环境的域名
  2. 本地运行项目
  3. 将生产环境登录后的cookie复制到本地运行起来的项目f12中
  • 据说改本地host即可不用复制cookie

性能优化

  • 使用f12中的Lighthouse分析性能，找到需要优化的位置
小tips, 遇到的问题集合