调试工具整理

更新日志

2016-12-22

  • [*] 文章结构修改
  • [+] 添加远程调试在线工具

本文收集整理了浏览器调试工具介绍,手机调试方案,nodejs调试,无线抓包。

远程真机调试

阿里移动质量中心(MQC)-H5测试

会提供一个测试报告,包含页面加载时间,节点信息,资源资源类型统计,域名资源统计,优化建议,该设备各浏览器的小视频。

testin

优测

小程序和微信开发调试

实时刷新

FIS

webpack

BrowserSync

weflow

puer

F5

开发者调试

spy-debugger

https://ant-tool.github.io/dora.html

浏览器调试

chrome developer tool 调试技巧谷歌浏览器调试比较基础的文章,期待补充和完善。

Chrome Developer Tools 功能与技巧详解

开发者调试工具Chrome Workspace
开发者工具中调试修改js或者css同时自动保存文件,能够避免开发人员在工具中调试好,再到编辑器中修改一次代码的重复操作,能够提高一定的效率

Opera Dragonfly documentation

Mobile emulation 模拟器

Browser-Sync:响应式Web开发调试利器

Chrome也自带抓包功能

WebApp调试

无线调试攻略
少年天才以外的我们,与其说是 coder,不如说是 debugger,都是一路调戏过来的,不好意思,是调试【本人口齿不清,发音不准,再发生类似事故请多多见谅】,因此当你 主动/被动 All in 了无线以后,你发现,知识的储备只是时间的积累和有意识的训练而已,可面对众多的 爱疯,案桌儿,山柴,内核不同,大小不一的设备。尼玛,没有个顺手的调试工具,简直是不能忍受的。

H5 Mobile 开发调试实践 by 破锣锅 总结的很详细

手机上怎么抓包调试
纳尼,手机也可以抓包,不可思议,赶紧试试吧

Firebug Lite: doing the Firebug way, anywhere.
亲,还在为ie6的调试而苦恼吗?Firebug值得一试。

远程调试工具-weinreWeb Inspector Remote(远程 Web 调试工具),功能和 Firebug、Webkit Inspector 类似,可以帮助我们在 PC 端远程调试运行在移动设备浏览器内的 Web 页面或应用,能够即时调试 DOM 元素、 CSS 样式 和 JavaScript 等。

用Weinre远程调试移动网页

使用 Weinre 调试移动网站及 PhoneGap 应用node版更适合前端。

在线Weinre

浏览器远程调试
对比了 Firefox、Chrome、Opera 三大浏览器的远程调试工具

真机远程调试-remote inspect web on real device

善用 Web 调试代理工具

Using Web Debugging Proxies

Remote Debugging on Android with Chrome 谷歌浏览器实现安装的远程调试

Chrome开发者工具中文手册

MIHTool 是前端工程师在iOS设备上调试和优化页面的得力助手

Edge Inspect方便的跨平台同步预览工具

jsconsole是一个风格和Weinre类似的工具,它更多地关注于控制台输出和代码求值。在访问JSConsole的网站的时候,用户输入“:listen”来获得带有GUID的一段JavaScript代码。这段代码需要被加入到待调试的网页中。于是,在加载网页的时候,代码将会连接到JSConsole服务器,并且根据GUID将此会话和用户的会话关联起来,于是用户浏览器中的控制台现在便已经处于待调试网页的JavaScript运行时环境中了。

通过 Mac 远程调试 iPhone/iPad 上的网页

整理:手机端网页调试方案

node.js调试

node.js调试
你还在一个个console.log(),那么你out啦

devtool

Runs Node.js programs inside Chrome DevTools (using Electron).

监测脚步变动自动重启命令

1
devtool scripts/parse.js --watch

对应有nodemon,目前这个是最符合我需求的。还有 Superviso node-dev

iron-node

node-inspector

node-debugger

WebStorm集成的调试器

抓包工具

Fiddler

Mac平台

扩展阅读