浏览器网页调试

浏览器网页调试

1.元素：查看网页的节点和样式

.cls *可以动态修改元素的class

*可以动态为元素添加新类

*勾选/取消类名可以实时查看效果

*点击具体的样式值可以进行编辑

*已计算 下的箭头可以跳转到生效的css处

*在检查工具内右键可以对节点进行截图

2.控制台：输出日志定位问题

console.log() 输出页面上的内容

console.warn()

console.error()

console.debug()

console.info() console可以用css自定义样式 输出方法类似c语言

占位符+内容 %s字符串 %o对象 %c样式 %d数字

console.table() 输出表格

console.dir() 输出节点树

3.源代码：利用断点暂停程序

使用关键字debugger 可以设置断点，代码执行到断点处会自动暂停

在断点列表中可以启用/禁用断点 暂停状态下鼠标悬停可以查看变量的值

在监听中可以添加要监听的变量

压缩后的代码变得不可阅读 可以使用source map文件使代码变得可以阅读

4.性能： 录制可以记录页面的渲染过程

5.网络：查看请求

6.应用程序：