首页
学习
活动
专区
工具
TVP
发布

WEB前端调试工具

前言

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

为了调整页面某个元素的宽度或高度到最适合值,在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); 并回车运行:

接下看看错误代码运行有错时,怎么找错:

代码(看看有没有错):

运行(2M大小):

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

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

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

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

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

好了,这篇就讲到这了,我觉得也够大家用了,剩下的大家如果还想了解的话,嗯,不说了,你懂的。

本文属于原创,如有转载,请标注原作者,版权归本公众号所有。如果你喜欢我写的文章请关注 java资源社区,欢迎大家继续关注本公众号的技术博文。如果您觉得这篇文章对你有所帮助的话,不妨点个赞哈,您的支持就是我坚持原创的动力~~

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180117G01V2D00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券