TreeviewCopyright © aleen42 all right reserved, powered by aleen42
浏览器调试
一、浏览器调试概述
- 通过控制台来检查代码的运行结果
二、打开控制台的方法
方式一、在页面直接f12
方式二、在页面右击鼠标点击检查即可(如下图)
图一
三、控制台介绍
一、Elements的作用(查找网页源代码HTML任一元素)
图三
二、Console的作用(记录开发过程中的显示的信息,输出打印日志)
图四
三、Sources的作用(断点调试js)
图五
四、Network的作用(分析HTTP请求后得到的各个请求资源信息包括状态、资源类型、大小可以根据这个进行网络性能优化)
图六
四、使用方法(演示案例)
图七
二、控制台输出日志
通过JS代码或者命令行console.log()可以将日志信息输出到控制台
图八
三、通过debugger;可以进行调试(如下图)
1、
图九
2、在代码中打一个debugger;(可以看到代码每一步的执行,便于排查问题)
图十
四、从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息(包括状态、资源类型、大小、所用时间等),可以根据这个进行网络性能优化。
图十一