chrome浏览器调试JS的基本知识

1、Elements：页面元素，可以对页面进行编辑，包括css样式表，保存后可以实时查看修改后页面的效果。如果觉得查找目标太麻烦，可以在页面上目标出右击鼠标选择检查，就可以在elements中定位到代码的位置。



2、Network：查看JS模拟的http请求，在这里面可以查看请求参数和请求类型，返回结果。点击左侧具体的URL

就可以查看HTTP请求的详细情况。



3、Sources：可以查看本页面的Js和css样式文件，并且可以在JS中新加断点进行调试。22、24和25行处设有断点。



4、Timeline：是查看页面性能和页面渲染速度的。

5、Profile：主要测试加载文件速度的。

6、Console：模拟Js控制台，直接写代码可以查看结果。也可以当查看某个对象有哪些方法。





通过console的dir方法可以查看对象的方法



7、Audits：是性能测试用到的，可以对优化前端页面和提升网页加载速度提供支持。