浏览器调试小技巧

合理使用浏览器进行调试，可以有助我们提高开发效率

1、打开调试窗口：F12 或 鼠标右键---检查

2、浏览器截图：ctrl+shift+p,输入capture就可以截图

 

3、箭头按钮：点击后可快速找到页面元素并查看其信息（样式、元素等）

 4、设备指标：切换成手机模式，调试h5样式或者是小程序可用到

 5、Elements 元素：左侧是元素列表，右侧是选中元素的css样式

 computed：盒模型以及所有的样式列表

6、 console控制台

（1）可在此调试js或者打印调试信息，换行（shift+enter）

   (2)  眼睛：监听动态表达式

监听某个元素的事件monitorEvents($('.main-container'))，取消监听unmonitorEvents($('.main-container'))

  (3)  打印 console.

• 简单打印语句

console.log("log"); // log
console.info("info"); // info
console.error("error"); // error
console.warn("warn"); // warn
console.assert(true, 'true'); // 不打印
console.assert(false, 'false'); // 为false才打印
console.log('%cyes','color:green;font-size:48px'); // %c颜色占位符
console.log('name:%s','张三') // %s值占位符

 结果：

• 获取对象键值对

 

•  事件方法执行时间 

console.time('执行time')
for(let i=0;i<100;i++){}
console.timeEnd('执行time')

结果：

• 打印表格

var arr=[{name:'zhansgan',age:19},{name:'lisi',age:30}]
console.table(arr)

结果：

•  对象打印

        

• 分组打印   console.group('分组名')   console.groupEnd()

        

•  打印元素完整属性  console.dir

操作：选中元素邮件----store as global variable  设置元素为全局属性，然后打印

与console.log的区别在于，console.log打印的是元素本身，并不是其属性 

 

7、sources 资源,查看资源文件、调试等

8、network接口调试

（1）只想看传参和请求头是否正确，但不想发请求给后端。

操作：network -----勾选 offline（断网状态）

（2）保留之前页面的接口请求，刷新或切换页面会自动清空所有请求

操作：network -----勾选 preserve log（断网状态）

（3）postman演示接口，复制请求相关凭证给后台，让其在postman中运行排查问题，减少截图加文字带来的沟通成本（要多使用这个功能）

操作：点击请求地址---右键----copy------copy as cURL