Chrome 与开发者工具

最新推荐文章于 2022-04-14 16:59:51 发布

宁小法

最新推荐文章于 2022-04-14 16:59:51 发布

阅读量3.8k

点赞数

分类专栏：前端-FRONT END Chrome调试-CHROME DEBUGGING 文章标签： Chrome代码调试 js调试

本文链接：https://blog.csdn.net/william_n/article/details/102691837

版权

前端-FRONT END 同时被 2 个专栏收录

84 篇文章 2 订阅

订阅专栏

Chrome调试-CHROME DEBUGGING

2 篇文章 0 订阅

订阅专栏

1.应用场景

使用Chrome进行前端开发调试.

2.学习/实践

1. console对象 //控制台

console.log（）与console.error（）的区别

在控制台中打印数据，两者都能打印出信息，且信息相同，只是颜色不同，前者为黑色，后者为红色[红色警告之意]

补充：

console.log("下标为%d的元素值为%d" ,1,2); //下标为1的元素值为2

var number = 11 * 9;
var color = 'red';
var css = 'color: red; background: yellow; font-size: 24px;';

console.log('%c %d %s balloons', css, number, color);

效果如下:

更多用法：见 //很强势

console.log - Web API 接口参考 | MDN

console 对象与控制台 - JavaScript 教程 - 网道 //阮一峰 - console 对象与控制台

2. 调试信息

建议不要是alert(); 因为会阻塞线程，JavaScript是单线程

3. 打断点前端调试代码很重要, 很有用.

方式有二: // 均要求, 了解代码大致流程. 当然也可以借用该方式去熟悉, 串联.

一, 直接Chrome开发者工具中指定位置打断点.

二, 在源码中写上debugger;

关于debugger 见下方

debugger - JavaScript | MDN

4. 刷新

在打开Developer Tools的时候，鼠标长按地址栏上的刷新按钮，//或者右键点击,即可看到三者

会获得三个分别不同的刷新选项：

正常重新加载，

硬性重新加载

清空缓存并硬性重新加载。

最后一个刷新选项对付缓存特别有用。

截图:

插入:

打开开发者工具, 选择network--> 勾选上 disable cache即可

5.用户模式/访客模式/无痕模式

可实现多用户同时登录.

https://blog.csdn.net/yiifaa/article/details/54290544 //巧妙利用Chrome访客模式实现多用户登录此文档有些过时, 参考与实践.

6.查看Js脚本执行时间

方法一:

通过开发者工具-->performance来查看

方法二:

通过代码计算

console.time('Array initialize');

var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
array[i] = new Object();
};

console.timeEnd('Array initialize');