whistle是基于Node实现的跨平台抓包工具，有关whistle的内容请查看Github： https://github.com/avwo/whistle [https://github.com/avwo/whistle] 在 轻松篡改WebSocket数据包 [https://juejin.im/post/5b4b79fa6fb9a04fbb111415] 一文中谈了如何用whistle抓包调试WebSocket请求，事实上whistle也支持对普通的Socket(TCP)请求进行抓包调试，只需要客户端将请求通过HTTP代理的方式转发到whislte即可，其中Node程序可以直接用 socketx [https://github.com/avwo/socketx] 模块实现，其它程序也可以参考该模块的实现： https://github.com/avwo/socketx [https://github.com/avwo/socketx] 。 如果是自己实现的代理，代理请求头要加上 x-whistle-policy: tunnel

前段时间，老板说：iPhone 又出了那么多新机型，你搞下兼容吧。我：测试机呢？老板说：没有。我：？？？ 这让我十分为难，毕竟巧妇难为无米之炊，于是我只好使出绝招：模拟器大法！ 一. 安装 > 启动 首先需要安装 Xcode，安装完毕后，在终端中运行 xcode-select --install 安装 Command-line-tools。 安装完毕后搜索 Simulator ，或者按 Command+Shift+G , 输入 /Applications/Xcode.app/Contents/Developer/Applications/Simulator.app ，便可运行模拟器。 你也可以使用命令行来管理和启动模拟器： * 运行 xcrun instruments -s 列出可用的 iOS 模拟器：

whistle [https://github.com/avwo/whistle] v1.6.0 (Github地址： https://github.com/avwo/whistle [https://github.com/avwo/whistle] ) 开始支持WebSocket和一般Socket的抓包、构造请求、以及修改发送或接收的数据。 请求抓包 打开whistle的Network，选中左侧请求列表中的WebSocket(Socket)请求，点击右侧的 Response -> Frames 。 WebSocket抓包： WebSocket

在开发微信公众号或小程序的时候，由于微信平台规则的限制，部分接口需要通过线上域名才能正常访问。但我们一般都会在本地开发，因为这能快速的看到源码修改后的运行结果。但当涉及到需要调用微信接口时，由于不和你在同一个局域网中的用户是无法访问你的本地开发机的，就必须把修改后的代码重新发布到线上域名所在的服务器才能去验证结果。每次修改都重新发布很繁琐也很浪费时间。 本文将教你如何通过 SSH 隧道把本地服务映射到外网，以方便调试，通常把这种方法叫内网穿透。 阅读完本文后，你能解决以下常见问题： * 开发微信公众号等应用时把本地服务映射到外网，加速调试流程； * 把你正在开发的本地服务分享给互联网上其它人访问体验； * 在任何地方通过互联网控制你家中在局域网里的电脑； Sponsor [https://app.codesponsor.io/embed/3bvxELAxnq8r4wheFyRkED8U/gwuhaolin/blog.svg] [https://app.codesponsor.io/link/3bvxELAxnq8r4wheFyRkED8U/gwuhaolin/blog] 最终目的

whistle [https://github.com/avwo/whistle] 是基于Node实现的跨平台web调试代理工具，可以作为普通的http代理或者用来抓包、修改、操作http、https、websocket、tunnel请求，如：修改hosts、请求方法、响应状态码、请求(响应)头、请求(响应)内容等等，基本上可以操作web请求的方方面面，而且支持插件扩展功能，本文主要讲下如何用 whistle [https://github.com/avwo/whistle] 调试移动端页面，安装及使用whistle等其它内容请参见Github： https://github.com/avwo/whistle [https://github.com/avwo/whistle] 。 移动端调试遇到的问题 相较于PC侧，在移动端调试网页，主要会遇到以下三个问题： 1. 没有Console，无法查看页面的js错误及通过 console.xxx 输出的调试日志 2. 无法查看、修改页面的DOM结构及样式 3. 无法debug

联调的认知和感触 认知（讨论） * 为什么要联调？ * 联调都干些什么？ 联调的问题 联调就是后端不好好写单元测试与集成测试，让前端发请求调用以达到测试的目的；前端不好好写Mock和测试，让后端输出数据以达到测试的目的。 更正确地认识 * 联调是前后端一起见证靠谱的测试结果 * 给需求方提供一个正确的需求验证环境 * 尽早暴露前后端实现的问题 联调必备技能 DNS与HOSTS * DNS（Domain Name System）的认识 * DNS提供将域名解析为IP * 域名只是便于记忆，真正起作用的还是IP * GFW作用，HOST翻墙 * 域名解析顺序 * 浏览器缓存>浏览器代理>HOST文件>系统DNS缓存 * 本地DNS服务器>上级DNS>...>顶级DNS HOST配置的姿势 * 直接修改HOSTS文件 * 使用Chrome应用 HostAdmin App [https://chrome.google.com/webstore/search/hostadmin app?hl=zh-CN] ，也有Firefox插件 HostAdmin

接触过前后端开发的同学应该都了解网络请求代理工具fiddler(mac下面常用的是Charles)，可以用来拦截分析请求、包装请求、本地调试和移动端代理开发调试等。多多少少，fiddler和Charles使用起来还是有些区别，不过还好都是可视化的界面使用配置起来也都比较方便。 先说下使用体验。对于一个追求高效的开发者来说，总是觉得要经常切换两个工具的使用比较麻烦，但是配置规则不通用，fiddler+willow组合的使用很不错，但也总是让电脑比较慢，而且规则配置需要点击输入显得不那么高效；Charles是mac上一款不错的网络代理工具，不过是收费的，价格不便宜（当然你可以找破解），但是路径替换功能使用起来比较麻烦，这点体验很不好。在两个平台上都折腾过，而且要经常切来切去（自己的电脑是windows），后来决定尝试入坑whistle（由avenwu@tencent开发），发现非常高效易用，解决了困扰多年的问题。这里总结梳理下常用的功能和使用方式。

从AVA github 的 README 第一句看出，AVA自己定义跟其他测试框架的最大区别多线程，包括 1. 同步跑测试 2. 不同文件多线程同时跑 3. 每个测试在单独的线程单独跑要求每个测试必须是单独的，不依赖外部变量的 另外，介绍文档中还给出了AVA的其他优势，其中有几点我觉得比较好：

WHISTLEJS https://github.com/avwo/whistle [https://github.com/avwo/whistle] whistle是用Node实现的类似Fiddler的web调试代理工具，支持查看和修改HTTP(S)、Websocket请求响应数据，且支持跨平台(Windows、Mac、Linux等可以安装Node的操作系统)。IMWEB团队avenwu作品。 第一步 安装 npm i -g whistle 第二步 启动 w2 run 第三步 配置浏览器代理 如果你使用SwitchyOmega就很容易了 * 新建情景模式 * 命名whistle * 代理协议 HTTP * 代理服务器: 127.0.0.1 * 代理端口: 8899 把浏览器代理切换到whistle就可以进入下一步了。 第四步 打开网页，开始配置 http://127.0.0.1:8899/#rules

写在前面 谈到node断点调试，目前主要有三种方式，通过 node内置调试工具 、 通过IDE（如vscode） 、 通过node-inspector ，三者本质上差不多。本文着重点在于介绍 如何在本地通过node-inspector 调试远程服务器上的node代码 。 在进入主题之前，首先会对三种调试方式进行入门讲解，方便新手理解后面的内容。至于老司机们，可以直接跳到主题去。 方式一：内置DEBUG功能 进入调试模式（在第1行断点） node debug app.js clipboard.png [https://segmentfault.com/img/bVCNET] 进入调试模式（在第N行断点） 比如要在第3行断点。 方式一：通过 debugger clipboard.png [https://segmentfault.com/img/bVCNE6] 方式二：通过 sb(line) 。 clipboard.png [https://segmentfault.com/img/bVCNE7] 执行下一步 通过 next 命令。

Atom 是 Github 专门为程序员推出的一个跨平台文本编辑器。具有简洁和直观的图形用户界面，并有很多有趣的特点：支持CSS，HTML，JavaScript等网页编程语言。它支持宏，自动完成分屏功能，集成了文件管理器。 本文将通过简单实用的方法来带你学习 Atom 编译器的使用。 常用的插件 * emmet: 提高开发效率 * atom-ternjs: JS代码智能提示补全 * file-icons: 文件图标 * linter-jscs: jscs验证插件 linter-jscs的配置: 1.打开设置【win: ctrl+, 】【mac: commond+, 】 2.点击packages,里面就是已经安装好的插件 插件自带按jscs格式化的功能,保存的时候自动格式化,非常方便.如果团队没有自己的代码规范的话插件默认自带了一些规范可供选择其中有airbnb、google、jquery、grunt等代码规范可选。

开发Hybrid混合应用时，很多人都觉得调试是一件比较麻烦的事情，因为它可能会依赖于app环境，绝不是普通的h5页面那么简单。 前些日子一直做手Q上的页面开发，针对如何调试，有一些心得，在此记录。注意，本文内容仅限于在windows中调试安卓系统中的Hybrid混合应用。本文是在 @ feix760 [https://github.com/feix760] 相关文档基础上整理而来，并作了适当的内容补充，在此特别表示感谢！ 1. 原理简介 借助Chrome的DevTools工具，连接手机后，可以呼起Chrome浏览器中的开发者工具，然后就能够像调试普通页面一样调试手机中的页面。 更详细的细节，请看 官方说明 [https://developers.google.com/web/tools/chrome-devtools/debug/remote-debugging/remote-debugging] 。 2. 安卓手机 从 Android 4.4 开始，webkit是支持远程调试的，不过需要将app的debug模式打开，可以使用如下代码：