使用谷歌浏览器调试代码，这是一个前端人在开发场景中必备的技能，今天为大家分享一个教程，教大家如何去通过谷歌浏览器查看源代码，修改代码以及实时预览网页效果！当我们调整完成之后，就能更快的找到问题所在，可以实现更加高效的找到bug，那么就赶快学起来吧！

一、调出开发者工具

按键盘F12，或者空白地方鼠标右键选择检查，还有一种方式则是快捷键Ctrl+Shift+i

二、开发者工具中常用内容介绍

1、Element：主要用来调试HTML和CSS代码

2、查看元素的代码：

点击左上角的箭头图标（或按快捷键Ctrl+Shift+C）进入选择元素模式，然后从页面中选择需要查看的元素，然后可以在开发者工具元素（Elements）一栏中定位到该元素源代码的具体位置

3、查看元素的属性：

定位到元素的源代码之后，可以从源代码中读出改元素的属性。如下图中的class、src、width等属性的值。

当然从源代码中读到的只是一部分显式声明的属性，要查看该元素的所有属性，可以在右边的侧栏中查看：

4、修改元素的代码与属性：

5、查看元素的CSS属性：

在元素的右边栏中的styles页面可以查看该元素的CSS属性，这个页面展示该元素原始定义的CSS属性以及从父级元素继承的CSS属性。从这个页面还可以查到该元素的某个CSS特性来自于那个CSS文件，使编码调试时修改代码变得非常方便。

在Styles页旁边，有一个Computed页面，这个页面展示该元素经过计算之后的所有CSS属性，即最后浏览器渲染页面时使用的属性。属性的计算由浏览器自动进行，是浏览器渲染页面的一个必不可少的过程。

6、修改元素的CSS属性：

在元素的Styles页面，可以对元素的CSS属性进行修改，甚至删除原有、添加新属性。不过，这些修改，仅对当前浏览器的页面展示生效，不会修改CSS源代码。所以在这里进行CSS属性的修改一般用来调整和完善元素的渲染效果。

给元素添加断点：在元素的右键菜单中选择断点选项（Break on…），选中之后，当元素被修改（通常是被JS代码修改）时，页面加载会暂停，然后可以查看该元素的属性。

元素断点添加之后，可以在右侧栏的DOM Breakpoints页面中看到，这个页面可以看到当前网页的所有元素断点。

7、查看元素的监听事件：

元素的右边栏的Event Listener页面，可以查看到该元素的所有监听事件。在开发中，尤其是维护其他人的代码时，会出现不了解元素对应的监听事件，这个时候，可以在这个页面中找到。这个页面不仅能看到对应的事件函数，还可以定位该函数所在的JS文件以及在该文件中的具体位置（行数），大大提高开发维护的效率。

三、Console

查看代码错误信息，打印代码，调试代码以及查看js中的API

1、查看JS对象的及其属性：

2、执行JS语句：

3、查看控制台日志：

当网页的JS代码中使用了console.log()函数时，该函数输出的日志信息会在控制台中显示。日志信息一般在开发调试时启用，而当正式上线后，一般会将该函数去掉

四、sources

查看资源等文件，调试代码

1、查看文件：

在源代码（Source）页面可以查看到当前网页的所有源文件。在左侧栏中可以看到源文件以树结构进行展示。

2、添加断点：

在源代码左边有行号，点击对应行的行号，就好给改行添加上一个断点（再次点击可删除断点）。右键点击断点，在弹出的菜单中选择Edit breakpoint可以给该断的添加中断条件。

3、中断调试：

添加断点后，当JS代码运行到断点时会中断（对于添加了中断条件的断点在符合条件时中断），此时可以将光标放在变量上查看变量的

也可以在右边的侧栏上查看：

在右侧变量上方，有继续运行、单步跳过等按钮，可以在当前断点后，逐行运行代码，或者直接让其继续运行。

五、network：

查看网页的HTTP通信，资源是否加载成功等

总结：本期教程告诉大家，

1、如何调出开发者工具调试代码；

2、在开发者工具中常用的内容介绍；

3、Console，查看代码错误信息，打印代码，调试代码以及查看js中的API；

4、sources。查看资源等文件，调试代码；

5、network：查看网页的HTTP通信，资源是否加载成功等。

怎样学到了吗，如果对你有帮助，记得给我点个赞支持下哦！