Chrome调试工具Developer Tools——前端必备神器

本文连接： https://blog.csdn.net/u012542647/article/details/79401485

 

    今天要给你们介绍一个神器，就是谷歌浏览器（Chorme）自带的前端调试工具——Developer Tools.

    在谷歌浏览器中，经过快键键F12就能够打开Devloper Tools：

 

Developer Tools

Develop Tools功能比较多，本文主要讲解比较经常使用的几个面板：Elements、Console、Sources和Network。

 

——    1    ——

 

Element面板

    之因此把这部分放在最前面，是由于这个功能是最为经常使用的。

    元素面板就是用来查看网页的HTML元素的，使用方法看下图。

查看HTML元素

    首先点击下左上角的按钮，而后咱们只要把鼠标悬停在网页元素上，便可查看到对应的元素。

    其中包括它的HTML标签与对应的属性，还有对应的样式与原型（包括盒子模型）。

     然而，它能作的不单单如此，我甚至们能够任意的进行编辑，对HTML元素能够进行改动，对它的样式也是能够自由调整！

    这就意味着，调整一个网页的样式能够实时的在chrome上进行微调，而不用每次修改后都要刷新资源后才能看效果。

    这简直是太棒了，有木有？

 

 

• Console面板

    控制台面板与各类开发工具的控制台相似，主要是用于控制台信息输出。

    遇到资源文件加载失败、网络请求失败等，或者一些提示信息，会打印到此处，像这样：

 

 

js加载失败

 

•    关于Console的其余用处

查看变量。直接在控制台中输入变量名（固然须要这个变量在做用域内），便可查看。

编写js。这就意味着咱们能够本身定义变量、写函数，作个简单的网页脚本彻底不成问题。例如，经过DOM来获取搜索关键字input这个元素：

 

查看变量

    

 

——    3    ——

 

• Sources面板

    资源面板就是将浏览器加载当前页面时，所用到的资源文件的列表，它会按资源的URL来进行分类，如图所示：

查看资源

    该面板最关键用处的就是能够调试js。咱们能够找到对应的js文件，而后设置断点，进行调试。

    在这里调试很是的方便，咱们能够添加要观察的变量，它能够是在做用域内已定义的变量，也能够是经过DOM获取到的元素，或者经过各类方式得出的变量。

    它能够清晰的展现出变量的全部属性、事件、以及原型链。

 

断点调试

    例如，咱们要观察某个已知id的input元素,咱们能够在这里看到它的全部属性，以及它的事件与原型：

 

 

观察变量

 

——    4   ——

 

• Network面板

    网络面板主要是将加载页面过程当中，发送的网络请求（包括加载资源）按照时间线的形式呈现，可以看到请求状态，以及加载的时间等：

网络请求

    咱们能够查看每一个请求的详细信息，包括请求的头部、返回值等（这个对于先后端联调DEBUG时很是有用）: 

请求详细信息

 

    至此，大概把我的在试用Chrome调试工具比较经常使用的部分整理了一遍，但愿本文能帮助到你了解Develop Tools。