认识达内从这里开始

认真做教育专心促就业

WEB前端调试工具

发布：海南_黄文彬
来源：达内新闻
时间：2018-01-31 09:21

前言

在开发前端界面时，相信很多人都遇到过以下几个问题:

为了调整页面某个元素的宽度或高度到最适合值，在IDE中修改css或者html再刷新浏览器，重复上述修改步骤不下20次；
为了修改html，先在IDE修改后再刷新浏览器，重复上面步骤不下10次。
为了得到javascript执行中的某个变量的值，在javascript中调用很多次alert函数；
前端页面js代码一不小心写错了，运行时，想点击弹出个弹出框，点了半天都没反应的，IDE工具控制台又没报错，非常苦恼；
更多更多的问题...

如果你遇到过上面的问题，那么希望本文能帮你解决上述所有的问题，从而使你将更多的精力投入到其他工作中。

对于解决上面的这些问题，我选择是利用浏览器的开发者工具来调试的。现在很多浏览器都有开发者工具，比如：360极速浏览器、chrome、火狐，IE 等一些浏览器，这次讲解我将使用360极速浏览器来进行讲解。

简介

1、Elements：可查看网页页面代码（修改只是当前使用有效），也可实时调试修改页面ccs代码样式。

2、console：记录开发者开发过程中的日志信息，也可在里面写js代码。一般页面运行时js报错都是可以在这里看到反馈和定位bug原因及其位置。

3、Sources：断点调试JS，可以查看程序代码执行的过程，断点调试对于每一个程序员来说可是很重要。

4、Network：从发起网页页面请求开始，分析HTTP请求后得到的各个请求资源信息（“小编有时候就利用这下载一些网站不给下载的在线视频，比如教学视频”）。

5、Timeline：记录并分析网站的生命周期所发生的各类事件，分析渲染js执行的每一个阶段。

6、Application：记录网站加载的各个资源信息。

7、Security：判断网页是否安全。

8、Audits：对当前网页的网络利用及网页性能进行检测，并给出一些优化建议。

9、：这个小图标，点击可以切换当前网页浏览为手机，界面大小和手机一样，再点一下换回来。

10、：这个小图标，点击页面上的元素，显示选中元素的HTML代码和样式。

使用说明

进入开发者工具：

（本次使用说明都是基于360极速浏览器上进行说明）

在要调试的页面上，鼠标右键->选择审查元素；

另一种方法：快捷键，Ctrl+shift+i；

Elements的使用

本来想放视频的，不多废话了，继续：

两大块，左边那块是页面html代码，右边那块是你选择的标签对应的css样式代码。

鼠标放在哪个块代码，页面对应代码块的界面就会变颜色。

点击开发者工具左上角的按钮（变成蓝色说明已经选中它了），然后点击页面任一块你想看的，然后工具会定位到相应的代码块。

选择“百度一下”，鼠标左键双击代码块的value="百度一下"，然后修改代码，改成把“百度一下”改成“好百度”，结果：

把“好百度”的高度改一下，改成100px（一样是双击修改，回车确认）：

结果：

这就是Elements的简单使用了。

console的使用：

先说说可以在console那写js代码，用百度新闻示例：

没输入啥之前：

在console那写var a = "你好"; alert(a); 并回车运行：

接下看看错误代码运行有错时，怎么找错：

代码（看看有没有错）：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>java资源社区——console使用演示</title> <script type="text/javascript"> var hello = "你好"; alert(hello); function test(){ var obj = document.getElementById("text"); var value = obj.value; alert(value); } </script> </head> <body> <input type="text" value="你好java！" id="test"/> <input type="button" value="测试" onclick="test()"/> </body></html>

运行（2M大小）：

look，理应说我们点击“测试”按钮应该会弹出一个 “你好java！” 的提示框的，可是没有，编程工具也没报错，错在哪咧（知道的可以先假装不知道）？这时候看我们的主角console会有什么提示：

看我圈起来的地方，左边是错误原因，右边是错误在页面代码的位置。

这次错误是说：无法读取空值的属性值。其实这次错误是获取空的对象，然后想从这空的对象获取value属性值是不行的，会报错。

点击右边圈起来的那块，可以直接跳到Sources，定位到代码错误位置

看到了吧，获取obj这个的对象的value属性值报错了，其实就是上面obj获取的对象是空的，id写错了，id应该是“test”。好了，改一下就可以运行了。

< 上一篇：Java不被看好前景堪忧？可能是想多了！

下一篇：Web开发这十年 >