精华内容
下载资源
问答
  • 作者:苏里https://juejin.im/post/5d09c39ee51d4576bc1a0e07前言相信大部分前端同学都是用 Chrome 浏览器进行开发,这篇博...

    作者:苏里

    https://juejin.im/post/5d09c39ee51d4576bc1a0e07

    前言

    相信大部分前端同学都是用 Chrome 浏览器进行开发,这篇博客要分享的基本上是除了我们常用 console.log之外的,Chrome 开发者工具控制面板提供的调试方法~

    首先在地址栏敲入:about:blank 创建一个空白页,再打开控制台~

    开始操作演示~(多图预警!~~

    关于 console

    关于 console 对象,其实提供了很丰富的 API,可自查文档~

    640?wx_fmt=png

    关于 Console 控制面板

    以下示例方法只存在于 Chrome 控制台 Console 面板~在 JavaScripts 中写是没有的哦!

    $ 家族

    $_

    返回上一个被执行过的值~640?wx_fmt=png

    虽说很类似于命令行里的 !!,但是 $_ 并不会再执行一次表达式,如下图可证:640?wx_fmt=png

    如果之前的值没有保存在变量里,可以通过这个方法临时访问~(为什么说临时,因为当你执行完下一个表达式后,$_ 已经更新了哈)640?wx_fmt=png

    $0 - $4

    $0、$1、$2、$3、$4 五个指令相当于在 Elements 面板最近选择过的五个引用。比如我在Elements面板上随意点击了掘金网站上的五个 DOM 节点。从时间线上,$4 是我第一个点击的。而 $0 是我第五个,也即是最后一个点击的。利用此方法可以快速在 Console 面板调试你选中的节点!640?wx_fmt=png

    补充一下,还有点类似正则匹配~如下所示

    function replacer(match, $1, $2, $3, $4, $5) {	
      return [$1, $2, $3, $4, $5].join(' - ');	
    }	
    const str = 'abc12345#$*%[hello]{world}'	
        .replace(/([^d]*)(d*)([^w]*)([.*])({.*})/, replacer);	
    console.log(str); // abc - 12345 - #$*% - [hello] - {world}
    $

    document.querySelector()方法的别名。不过比较少为人知的应该是它的第二个参数。指定从哪个节点开始选择。有时候想减少范围时,尤其管用!

    640?wx_fmt=png

    P.S. 函数签名 $(selector,[startNode])

    $$

    document.querySelectorAll()方法的别名,可参考同上。

    P.S. 函数签名 $$(selector,[startNode])

    $x

    根据 XPath 表达式去查找节点。如下图示例:640?wx_fmt=png

    查找掘金站内所有含有 href 属性的 a节点,然后遍历过滤含有 http 或 https 的节点~当然好像目前来说,大部分情况直接用 $$$可以覆盖,说不定特殊情况下 $x会很有用。有需要的同学可以了解学习一下~XPath 表达式规则可参考:https://www.w3schools.com/xml/xpath_syntax.asp

    P.S. 函数签名 $x(selector,[startNode])

    API 工具方法

    以下方法同样只存在于 Chrome 控制台 Console 面板里,同学们请注意哦~

    keys/values

    见名知意。功能类似于 Object.keysObject.values640?wx_fmt=png

    monitor/unmonitor

    用来观察函数调用的工具方法。在函数调用的时候,可以同步输出函数名以及参数。

    640?wx_fmt=png

    当不再需要观察该函数时,调用 unmonitor 取消即可。

    但是匿名函数不会生效,因为获取不到名字.

    640?wx_fmt=png

    monitorEvents/unmonitorEvents

    可以观察对像的事件~

    640?wx_fmt=png

    也可以同时观察对象的多个事件~

    640?wx_fmt=png

    同样,使用 unmonitorEvents 取消观察。结合以上的 $ 家族一起使用更便利哦640?wx_fmt=png

    P.S. 函数签名:monitorEvents(object[,events])

    copy

    快速拷贝一个对象为字符串表示方式到剪切板~640?wx_fmt=png

    getEventListeners

    获取注册到一个对象上的所有事件监听器~640?wx_fmt=png

    其实还有内置的 inspect、debug/undebug 等方法,大家可以自行搜索,都很有用~这里就不一一介绍了~

    关于断点调试

    断点调试十分重要,以往我们可能直接在代码里添加 debugger,然后刷新浏览器调试。实际上除了这种方法外还有很多种断点。

    DOM breakpoint

    在 Elements 面板,右键点击节点唤出菜单,添加对应的DOM断点,可以监测指定节点的子树修改、属性修改、以及节点的移除。640?wx_fmt=png

    Source breakpoint

    有时候无需在源码中添加 debugger。直接在 Source 面板添加断点即可调试。见下图行号上的小蓝色箭头!

    640?wx_fmt=png

    Conditional breakpoint

    条件断点。只有符合条件时,才会触发断点。见下图行号上的小橙色箭头!640?wx_fmt=png

    640?wx_fmt=png

    640?wx_fmt=png

    除此之外,还有 blackbox、XHR(fetch) breakpoint 等各种 Chrome 提供的工具,建议同学们多去了解一下,说不定关键时候可以发挥很大的作用~

    小技巧

    如果找不到对应的指令,可以在控制台使用快捷键 Ctrl + Shift + P。MacOS 的话就是 Command + Shift + P(这个和编辑器是一样的道理)。快速搜索你想要的控制面板工具~

    640?wx_fmt=png

    小结

    其实长久以来,我也一直只会用 console.log 和简单的 debugger 来调试 Web 应用,有时候遇到复杂的问题时,匮乏的调试方法种类难以快速定位问题,从而降低工作效率。因此针对此类情况,学习如何更好的调试相信是会对工作有极大的帮助!

    最后,欢迎同学们补充或指正这些调试工具方法~

    当然,对大家如有帮助,不甚荣幸~

    好文章,我在看❤️

    展开全文
  • 前端调试技巧汇总

    千次阅读 2019-03-21 17:40:58
    其实说到调试技巧,我相信现在会有很多种类的调试技巧,每个人都有自己的调试方式方法; 现在我把我自己的调试技巧总结一下,也许会对其他的小伙伴有帮助; 1.日志调试 这种调试方案是最方便简明的,直接在...

    其实说到调试技巧,我相信现在会有很多种类的调试技巧,每个人都有自己的调试方式方法;

    现在我把我自己的调试技巧总结一下,也许会对其他的小伙伴有帮助;


     

    1.日志调试

             这种调试方案是最方便简明的,直接在需要调试的代码处console.log(xxx),可以直接打印出所需要的数据,一目了然;


    添加console.log(),之后可以直接在控制台看到所需要打印的数据,可以根据这个数据进行调试,查看效果;但是有一个比较麻烦的地方,就是在prod环境的时候要屏蔽掉
    console.log();当然现在构建工具是可以很轻松做到这一点的,不过也算是需要处理,难免也算一个麻烦的地方;
    这种调试方法
    推荐指数还是挺高的,3星吧;
    2.Bom的alert
             这种调试方法很少使用,因为限制太多,用户体验太差,而且数据不全,当调试数据是Object的时候,会出现[object Object],这样的显示,而且会直接阻断浏览器进程,用户体验较差,且数据并不完善,各个浏览器弹出的样式还不统一一致;但是使用起来也是很简单,直接alert(xxxx)即可,不过如果prod环境没有删除的话。会出现非常差的用户体验。
    因此不推荐;
    3.debugger
            这种调试方案其实来自于java,使用方式也是很简单,直接在代码中需要断点的地方,直接debugger即可,当js执行到该语句的时候,会自动暂停,页面会出现蒙层卡住,然后会自动跳转到debugger代码处,处于当前执行环境的数据将鼠标移动到该数据上会显示出来,是一种很简便的调试方法,不过后面一定要删除该语句,否则的话一旦用户不小心点开开发者工具(F12),就会进入debugger,也会影响用户体验的。

    debugger


    当点击页面中的前进按钮的时候就会跳转到下一个断点处,全部跳转完成后断点就会结束。
    4.浏览器断点
            在浏览中断点其实是一种比较好的方式,可以省去删除代码中bedugger的方式,首先需要有项目源代码的soureceMap,webpack打包工具里面会默认开启sourceMap的配置,可以直接在浏览器里面断点,在行数的地方可以直接加上断点,F8可以直接跳转到下一个断点,F10可以单步骤调试,F11可以直接进入方法,也相当于单步调试了。

    浏览器断点

     

    5.移动端webview页面调试(android)
            目前chrome浏览器的话使用的较多,而且集成的开发者工具是目前比较好用的调试方案;
    可以在浏览器地址里面输入:

    chrome://inspect/#devices

            如果不想直接输入,也可以在chrome的扩展工具里面下载adb这个插件,使用这个也是可以的;使用手机连接电脑后,默认弹窗后点击允许电脑调试即可可以在该页面中看到所需要调试的页面,下面会有对应的地址;
    app如果不是原生,而是h5页面嵌入的话,也是可以直接进行调试的;调试方法上面已经说过了,哪一种都是可以的

    6.移动端webview页面调试 (ios)
            目前市面上基本使用safari浏览器中的开发页面进行调试,但是必须要基于ios系统,window系统的话,这个是不可以调试的。

            不过在github上提供了一种方式,就是使用ios-webkit-debug-proxy这个插件,
            使用前需要在iphone的设置中开启safari-》高级-》-》Web检查器;
            之后一般电脑里面都安装了node吧,如果没有的话,可以安装一下node,挺方便的。
            之后通过node的安装命令

    npm install ios-webkit-debug-proxy -g


           安装之后需要启动ios-webkit-debug-proxy

    ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html

       开启之后,会显示

    Listing devices on :9221
    Connected :9222 to iphoneName

      之后在浏览器器里面打开

      localhost:9221
      打开的话里面就可以进行调试了,将iphone连接到电脑上就可以调试手机页面了;

    7.控制台调试
            其实还有一种比较投机的方法调试ios设备,当然android也是可以的,就是实际上ios设备内核使用的都是safari浏览器内核的,safari浏览器也都知道是ios的标配,windows系统是很少有safari浏览器的。

          但是实际上window也是可以安装safari浏览器的,只不过是有版本的限制,最高的版本肯定是不行的,目前根据苹果官网证明safari 5.1.7 for window是最后一个版本支持window的,这个版本的safari是可以下载到的。

           然后开启开发者模式,在这个浏览器里一般是可以模拟iphone手机的环境的,可以在这个控制台写一些具有兼容性的代码,看看执行的情况,往往是可以解决很多ios上莫名其妙的问题的,例如我之前就通过这个浏览器的控制台找到了一处时间的bug,因为ios是没办法解析'2018-12-12'这样的时间的,android是正常的,但是iphone手机就会出现nan年nan月nan日,部分兼容性的问题是可以在这里看到的;
    同样,在这里也是可以书写js代码的,不确定的话,可以在写好测试好在直接code进源代码中;

    标题

    8.微信调试
            如果发现在微信中页面出现一些很诡异的地方,怎么调试呢?之前的话,微信在chrome的chrome://inspect/#devices是不可以调试的,现在已经可以了,不过之前不可以的时候,我也找到了一个微信提供的软件去调试,这个软件叫微信web开发者工具而不是微信开发者工具,都是微信官方提供的,名字只差一个web,但是功能可是千差万别的,
    微信web开发者工具是调试页面的,具有调试功能;
    微信开发者工具是开发小程序和微信的,不具备url单页面调试功能,当然项目是可以调试的;
    这个具体的使用方法我就不多说了,程序里面写的很明确,我就不多赘述了;

          以上基本涉及了各个领域的调试技巧,因为是本人自行总结,可能会存在问题或者遗漏,如有发现的话,麻烦留言提出,谢谢!

    展开全文
  • 前端调试技巧

    2018-03-05 23:24:45
    1.浏览器控制台调试方法2.代码里打断点<script> debugger </script>3.network查看加载的东西4.

    1.浏览器控制台调试方法


    2.代码里打断点

    <script>
        debugger
    </script>

    3.network查看加载的东西


    4.



    展开全文
  • 常用前端调试技巧

    2021-05-23 23:28:19
    查看网速较慢时的效果

    查看网速较慢时的效果

    展开全文
  • 前端页面调试技巧

    2019-09-09 15:51:35
    做java的,后端都,无法避免,和前端交互,需要掌握...前端页面调试技巧,有兴趣的同学可以研究一下,我是收藏了: https://www.jianshu.com/p/b25c5b88baf5 https://juejin.im/post/5901e8d6a0bb9f0065e64f63 ...
  • 分享一些 Chrome 浏览器的前端调试技巧 转载于:https://www.cnblogs.com/jing1617/p/11352648.html
  • (给前端大全加星标,提升前端技能)作者:苏里https://juejin.im/post/5d09c39ee51d4576bc1a0e07前言相信大部分前端同学都是用 C...
  • 一,js篇 通常来讲我们都喜欢一个console,简单方便,个别时候还能当日志来看, 但是有些时候呢用console是不行的,比如判断一个值的时候,如果该值是‘fasle’,那么代码的运行结果可能并不能如你所料,这个时候...
  • 前端调试技巧mark

    2021-10-14 09:44:51
    欢迎学习前端调试技巧 前端调试技巧
  • Waf2框架前端调试技巧 一、调试模式与运行模式 EAS前端运行模式分为运行模式和Debug模式。 1.1 运行模式: 每个界面的JS都会被打包并且混淆,并将多个JS压缩到一个链接中。 1.2 Debug模式: JS的加载是单个加载的...
  • 前端调试技巧大全

    2019-10-04 06:18:12
    在代码中插入debugger可以在其位置触发断点调试。 Console.dir 使用console.dir命令,可以打印出对象的结构,而console.log仅能打印返回值,在打印document属性时尤为有用。 ps: 大部分时候,对象返回值就是其...
  • 前端Chorme调试技巧(一)---(转)

    千次阅读 2018-08-07 17:01:06
    Content scripts 是 Chrome 的一种扩展程序,它是按照扩展的ID来组织的,这些文件也是嵌入在页面中的资源,这类文件可以读写和操作我们的资源,需要调试这些扩展文件,则可以在这个目录下打开相关文件调试,但是几乎...
  • Chrome前端调试技巧

    2020-02-29 14:14:41
    2.在Chrome调试后代码同步到本地文件 3.监控网页那些元素重绘 4.统计当前页面哪些js.css…资源没有使用到 (没有使用到的代码占据某个文件的百分比,并用红色标记出可能没有使用到的代码,绿色标记处使用到的代码...
  • 前端开发过程中,通常需要在线编辑某个样式或者js代码,刷新后又会被覆盖,这样不利于调试. 然后使用chrome浏览器调试时可以解决这个问题,在chrome中打开一个页面,打开开发者工具,选择source标签页,如下所示 ...
  • 浏览器前端调试技巧

    2017-07-06 14:15:11
    在ztree的官网无意中找到了几个谷歌浏览器调试技巧的链接,分享下: https://note.wiz.cn/pages/manage/biz/payReadNote.html?kb=3fe9d146-6498-4882-b75c-f533442aba5b&dc=857ef34b-af65-423c-b2e2-2aedf734825f
  • 需求: chrome在调试时,如果页面一闪而过,看不到是前端还是后端报错了 解决: 在chrome中的network下把Preserve log勾选
  • 使用谷歌浏览器打开开发者工具,Windows环境下,可使用键盘F12唤醒。
  • java web项目中前端调试技巧

    千次阅读 2017-03-17 20:42:51
    那么如何提高前端调试效率呢?公司同事教了我一个比较好的方法。 首先,需要确定,只修改前端代码,同时也需要后端生成代码及数据库的支撑,才用这种方法。 那么具体的步骤如下: 第一,把项
  • javaWeb前端调试的三种方法

    千次阅读 2019-12-26 16:48:27
    前端调试常用三种方法 1、通过alert() 在js代码适当的位置使用alert方法打印变量的值,执行程序就可以看到浏览器中弹出结果 2、通过console.log()方法 在js代码适当的位置使用cosole.log(),执行程序就可以在...
  • 前端调试技巧2:fiddler能替换h5项目或者APP中的JS或者HTML嘛? 2.1 引入vConsole的js文件 把下边的script元素引入当前页面即可 < script src = "https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js" > ...
  • 对于搞前端开发的人来说,前端调试是不可避免的,使用谷歌浏览器调试更是必备手段,今天主要是给大家分享一下清楚缓存的技巧。已经了解的朋友请移步。 为什么需要清理浏览器缓存? 我们通常说的WEB应用采用BS架构...
  • doSth() function doSth(cb) { cb() }
  • 前端js调试技巧

    2018-07-10 01:28:02
    身为前端小白的后端的我,又学会了一个前端调试技巧,可以调试js问题。 问题 在做一个页面的时候,js逻辑写完,所需要的js文件也都引入了,但是就是没有效果,我猜测是js代码出问题了,但是苦于不知道怎么调试。 ###...
  • 而在互联网前端开发越来越重要的今天,如何在前端开发中降低开发成本,提升工作效率,掌握前端开发调试技巧尤为重要。本文将一一讲解各种前端JS调试技巧,也许你已经熟练掌握,那让我们一起来温习,也许有你没见过的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 16,931
精华内容 6,772
关键字:

前端调试技巧