如何利用浏览器调试前端代码(针对新手老手忽略)

分享 未结 精帖
25 1871
我擦这么菜
悬赏:20飞吻
我是一个做后端的,但是前端也略懂一点,每次看到社区的一些提问我习惯性的喜欢回复审查元素,因为前端的问题不审查元素你要看代码看出问题还是比较困难的(老手除外,踩的坑多了就有经验了),这里我分享一下自己的前端调试经验。

个人比较喜欢用火狐调试(不是说其他浏览器就垃圾的,个人习惯而已)
1:首先下载一个火狐浏览器(最新的版本的不好,最好下载一个稍微老一点的版本,火狐官网有个经典版可以下载)

2:安装firbug插件(调试神器,其他浏览器都有类似的功能,但是我个人感觉这个还是很棒的。),下面是安装图解









(因为我自己安装过了,可能操作步骤略有不同)


下面讲解一下使用:
随便打开一个网页,然后点击这个小爬虫。



会出现一下界面



然后刷新一下页面就能看到全部的加载信息了



所有的请求,消耗时间,资源地址,cookie都能看的一清二楚(https的站点也一样)

调试js,css错误,在控制台里面有显示(如果出错了,会给你定位到哪一个页面的哪一样代码,看的非常清除),对于上传文件,模拟ajax操作可以看网络里面的请求(例如我这里就以上传图片作为例子)




就能看到提交的每个参数的key,value。

顺带说一下,对于css样式没有的可以审查元素处理,随便找个能右键的地方,审查元素。



悬浮上去就会对应的显示你当前的这段html在那个位置,很清晰明了。

以后希望社区不要出现那种"哎呀,我用了layui但是怎么界面是这样样子啊,样式全部没了,是不是layui的bug啊。","哎呀,我这段代码点击了怎么不执行啊?","哎呀我加载了这个资源啊,怎么没有啊"

当然我上面的问题不是讽刺谁,很多问题多踩一点坑经验就有了,你们这些问题我(别人)以前都是这样经历过来的,希望这样能帮助到一些刚接触到前端的一些朋友。
回帖
  • 辰紫天
    2017-12-20
    谷歌浏览器 自带这些,为什么要用火狐?有些语法火狐还不支持哟!
    5 回复
  • Akun
    2017-12-20
    Google Chrome 是世界上最好的浏览器[哈哈]
    2 回复
  • @Akun 世界上本没有最好,最坏,如果最好,就不会有那么多的同类产品,就应该被垄断了(个人愚见勿喷)[害羞]
    1 回复
  • MickeyMeng
    2017-12-20
    新版Firefox的Firebug不能conlose.log();[左哼哼]
    0 回复
  • @MickeyMeng 所以我说了下载老的版本啊[可怜]
    0 回复
  • @じ辰╆紫天せ 都说了个人习惯,google的能调试,但是我感觉这个更好点,作为调试足够了
    0 回复
  • Tenglin
    2017-12-20
    [白眼] 我能说火狐在win10上有BUG吗
    0 回复
  • 火狐脱离了firebug,很难生存~
    0 回复
  • @Tenglin 目前我没遇到什么问题,我家里的电脑win10
    0 回复
  • @志远有18CM 这个我不清楚,反正就感觉firbug挺好用
    0 回复
  • Andy_小君
    2017-12-20
    @Akun 你会被暴打的[挖鼻]
    0 回复
  • Z13区
    2017-12-20
    新版本火狐,不开任何网页的情况下,有5个左右子程序运行,占用内容200M左右。我不知道为什么。。。
    0 回复
  • PHP是世界上最好的预言!
    0 回复
  • @Z13区 这些东西不再我的研究范围内[嘻嘻] 得问火狐
    0 回复
  • firebug 早就被火狐的新版本 给取代了,你这浏览器版本 是有多老啊
    0 回复
  • @番茄网页设计 怀旧版[哈哈]
    0 回复
  • Hink745
    2017-12-20
    讲的真好,所以我选择用谷歌[哈哈]
    0 回复
  • chenyi
    2017-12-20
    还是别用火狐了吧 谷歌好点
    0 回复
  • Mistyss
    2017-12-20
    google的好点吧。
    有时候遇到的问题真的火狐不太好。
    0 回复
  • 码农老沈
    2017-12-20
    觉得火狐这玩意好是好,但是不够简洁
    0 回复
  • 感觉此文会像“PHP是最好的语言”一样挑起 Chrome 和 Firefox 的战争[偷笑]
    0 回复
  • superyu
    2017-12-21
    Firefox(老版本4,新版本5以后的没有fireBug了)适合调试数据,在控制台就能看到所有请求和返回数据,简单直观,适合做接口调试用。
    Chrome 适合做前端页面调试。
    0 回复
  • chenweiy5120
    2017-12-21
    都用过,最后还是用了Google,简洁
    0 回复
  • 树枝孤鸟
    2017-12-21
    谷歌的是怎么用的啊
    0 回复
  • @树枝孤鸟 右键-》检查 其他的用法基本类似相同
    0 回复
本帖已设置禁止回复