前端代理及调试工具 #96

xccjk · 2023-06-13T08:23:43Z

前端代理及调试工具

Fiddler是广受欢迎的Windows平台上的Web调试工具，在前端调试和抓包场景中应用广泛。它可以捕获HTTP请求、检查响应、调试客户端和服务器代码等。

Charles是一款跨平台的OS、Linux、Windows和移动平台。它可以作为HTTPS代理来截取并检查网络请求，还支持重复请求，提供真实的速度限制，并支持支持Rewrite、Map Local等功能。

mitmproxy是一款基于Python的开源代理工具，提供了一个类似于Charles的命令行界面以及图形化的web界面（mitmweb）。它可以与浏览器协作，拦截、记录、修改和重放请求，并且在安全测试或API开发中非常实用。

AnyProxy是一款Node.js程序员开发的高性能代理服务器，支持npm install -g进行快速安装深受前端和Node.js开发者的喜爱。它可以拦截请求并自由修改请求和响应头或主体。而且，它也支持抓包调试、mock数据等功能。

Whistle是一款跨平台的Node.js实现网络代理工具，支持Windows、Linux和macOS等操作系统，其特点是可以细粒度地控制流量的各种参数，同时还提供了插件机制进行扩展便于构建定制化功能。

Weinre是一款轻巧的开源工具，旨在为Web开发人员提供远程WebInspector服务。它可以帮助您在开发过程中检查和修改HTML、CSS和JS。使用Weinre，您可以轻松地将Web调试工具的功能集成到移动Web应用程序中，以便在实际移动设备上进行调试。

VConsole是一款轻量级的移动设备调试面板，支持JavaScript API、UserAgent、网络请求显示、手势模拟等常见调试功能，同时还提供了自定义插件接口，方便快速扩展。

Eruda是一个基于浏览器的移动设备调试工具，由于其小巧轻便，易于使用等特点，在前端领域也颇受欢迎。它包含了各种优秀的移动端工具，如控制台、面板、日志、元素、网络请求、源代码等，并且能够快速部署到页面中以获得即时调试体验。

Chrome DevTools结合一些Chrome拓展工具如User-Agent Switcher和Emulate Touch Events等扩展，可以帮助开在桌面浏览器上方便地模拟移动设备场景进行调试。

Chrome DevTools是Chrome浏览器自带的开发者工具，最常用的功能包括Network、Elements、Console、Sources、Application等面板，在元素选择、样式编辑、JS调试和性能分析等方面均极为实用。

Firefox Developer Tools是Firefox浏览器自带的开发者工具，包括类似于Chrome DevTools的各种面板，此外还有类似于“布局查看器”的特殊功能，可以对网页的网格和flexbox进行实时视觉化展示。

Safari Web Inspector是Safari浏览器自带的开发者工具，主要包括诸如Elements、Timeline、Resources等面板，可以检查页面元素、查看网络请求细节、编辑CSS样式等。

Microsoft Edge DevTools是Edge浏览器自带的开发者工具，可以在调试HTML、CSS和JavaScript时提供全面的支持，并提供其他特殊的调试功能，如移动设备模拟和内存分析。

Vue.js devtools是针对Vue.js框架的一个特殊扩展，提供了一组能够帮助 Vue.js 应用进行调试、性能优化等功能的工具。

React Native Debugger：是一款专门用于React Native的开发者工具，可用于调试JavaScript代码、检查网络请求、查看组件层次结构等。
Flipper：是Facebook开发的一款通用移动应用调试工具，可用于Android、iOS和React Native应用的调试。Flipper提供了许多插件来帮助开发者进行调试，如网络调试插件、布局调试插件等。
Chrome Developer浏览器中使用开发者工具可以调试React Native应用。在React Native的Debug模式下，可以通过Chrome DevTools远程调试JavaScript代码、检查DOM元素等。
Visual Studio Code：是一款流行的代码编辑器，也可以用于React Native应用的调试。通过安装相关扩展，可以实现调试JavaScript代码、检查布局等功能。