admin 管理员组

文章数量: 887021

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

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


 

本文标签: 小技巧 浏览器