精读《前端调试技巧》

[ascoders]

编码只是开发过程中的一小部分，为了使我们工作更加高效，我们必须学会调试，并擅长调试。

文章地址：https://css-tricks.com/debugging-tips-tricks/?utm_source=javascriptweekly&utm_medium=email

[ascoders]

文章本身是科普型的，有关代码调试技巧我们可以来补充 :p

[NE-SmallTown]

技巧还是你们谈吧哈哈, 就不献丑了. 不过可以看下chrome 60, 新增了一些关于调试的东西

[ascoders]

Inspect the inspector, use Device Mode in desktop mode, stretch viewport to 9000px wide, grab the Timeline's , toDataURL() it, set to img[src], download, print.

[jasonslyvia]

@ascoders 哈哈，这是 debug 界的 O2O 吗？

[alcat2008]

提到调试，怎么能少得了 dev-tips，满满的 dev tips

[rccoder]

@alcat2008 这个网站强势

文中的技巧都是非常有用的，顺便补充下：

在 All In 无线的时代，移动端的调试比较蛋疼。

• 浏览器无法完全模拟手机（手势啊、iOS的橡皮筋啊、原生滚动事件什么时候触发啊、滚动起来背景动不动啊、滚动起来滑不滑啊、浮层能不能弹起来啊等等等）
• 手机系统、浏览器不同会遇到不同的问题
• Hybride 下的 WebView 又会出现一系列的问题
• 移动端下 log 查看（微信团队的 vConsole / AlloyTeam 的 Rosin、聚划算的momoda(好像只在阿里内部有，没放出来?） / 建立报错日志上传体系）
• 最后还是靠经验XD，顺便骂一下华为手机🙃

一些链接：

• http://www.alloyteam.com/2015/03/mobile-web-debug-tool-rosin/
• http://yujiangshui.com/multidevice-frontend-debug/
• https://developer.chrome.com/devtools/index

[DanielWLam]

如果移动端的浏览器可以打开控制台就好了

[rccoder]

@DanielWLam 可以试试微信团队的 vConsole，可以解决大部分场景

[hsuanxyz]

@DanielWLam 当然可以，至少 Chrome 和 Safari 是可以的；
Chrome 打开这个地址 chrome://inspect/#devices 不知道咋用可以去 google
Safari 在 Develop 菜单里面 可以看见你开启了 Web检查器 选项的设备

[ascoders]

• 对于特定业务场景也可以通过开发 chrome 插件来做，比如分析自己网站的结构、版本、代码开发责任人、一键切换开发环境什么的。。
• 移动端调试的话，之前有同事做过 reactNative 远程调试，就是把控制台输出信息打到服务器，本地通过与服务器建立 socket 链接实时查看控制台信息。要知道实时根据用户 id 开启调试信息，并看用户真是环境的控制台打印信息是非常有用的，能解决很多难以复现问题。
• DOM 断点，在 dom 元素右键，选择 （Break on subtree modifications），可以在此 dom 被修改时触发断点，在你不知道 dom 被哪段 js 脚本修改时可能有用。
• Event Listener Breakpoints，神器之一，对于任何事件都能进入断点，比如 click，touch， script 事件统统能监听。

[huxiaoyun]

文章有很多有用的插件，还没一个一个试用完。说下大家可能都知道的tips吧

• fiddle 用本地文件替换生产环境的 js, css ，完全模拟生成环境线上调试Bug。

• firefox 的3D 视图，看 div 的层级关系很有意思。以前 firefox 是自带这个配置，现在要安装Tilt 插件。

[ascoders]

@rccoder vConsole 是解决移动端场景吧，webview 链接不上 chrome 的时候，可以内嵌进去调试，很方便。

[ascoders]

这期精读开的口子有点大了，我整理起来压力很大，最近被忙死了。。

[vagusX]

@DanielWLam 手机端调试工具类似 eruda 这种已经有不少了，感觉 eruda 还是可以一用的

[DanielWLam]

@hsuanxyz chrome的那个方案，看了一下是调试webview的 https://developers.google.com/web/tools/chrome-devtools/remote-debugging/webviews ？没看明白。其他方案基本都是要引入脚本，有点不优雅

[ascoders]

@DanielWLam chrome的方案，前端不需引入脚本，只需要 app 支持 setWebContentsDebuggingEnabled 即可。

[santong]

mark

[avwo]

web抓包调试工具可以试试whistle：https://github.com/avwo/whistle，看了下这篇文章里面提到的功能基本上它都有，绝大数操作只需简单的配置，且支持通过Node模块扩展功能，关于移动端调试可以看下这篇文章：利用whistle调试移动端页面