更新日志
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同时自动保存文件,能够避免开发人员在工具中调试好,再到编辑器中修改一次代码的重复操作,能够提高一定的效率
Mobile emulation 模拟器
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 调试移动网站及 PhoneGap 应用node
版更适合前端。
浏览器远程调试
对比了 Firefox、Chrome、Opera 三大浏览器的远程调试工具
真机远程调试-remote inspect web on real device
Remote Debugging on Android with Chrome 谷歌浏览器实现安装的远程调试
MIHTool 是前端工程师在iOS设备上调试和优化页面的得力助手
Edge Inspect方便的跨平台同步预览工具
jsconsole是一个风格和Weinre类似的工具,它更多地关注于控制台输出和代码求值。在访问JSConsole的网站的时候,用户输入“:listen”来获得带有GUID的一段JavaScript代码。这段代码需要被加入到待调试的网页中。于是,在加载网页的时候,代码将会连接到JSConsole服务器,并且根据GUID将此会话和用户的会话关联起来,于是用户浏览器中的控制台现在便已经处于待调试网页的JavaScript运行时环境中了。
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集成的调试器
Node.js debug模块
node –inspect index.js
抓包工具
- whistle
- 【开源项目】LivePool:基于 NodeJs 的跨平台 Web 抓包替换工具
- HttpWatch
- HttpAnalyzerStd
- tcpdump
- wireshark 文章推荐:Wireshark基本介绍和学习TCP三次握手
- NProxy 文章推荐:NProxy——Mac和Linux平台下的Fiddler
Fiddler
Mac平台
- NProxy——Mac和Linux平台下的Fiddler
- Charles 使用charles proxy for Mac来抓取手机App的网络包 Charles(最强大的http调试工具)详细教程(上) Charles(最强大的http调试工具)详细教程(下)
扩展阅读
- 远程调试(Remote Debugging)
- 各种 真机远程调试 方法 汇总
- http://wiki.jikexueyuan.com/project/chrome-devtools/remote-debugging-on-android.html
- http://www.jianshu.com/p/82ab631502e1
- http://yujiangshui.com/multidevice-frontend-debug/
- http://div.io/topic/1449
- http://alloyteam.github.io/Spirit/modules/Mobug/
- https://github.com/hongru/horn
- https://github.com/kaiye/kaiye.github.com/issues/4
- https://github.com/riskers/blog/issues/11
- https://gold.xitu.io/entry/5851e77d61ff4b006c8414dd
- https://www.zhihu.com/question/20322475
- web远程调试方案推荐
- https://futu.im/posts/2018-06-12-how-to-debug-webview/
- 移动端真机调试指南