大家都是怎么调试 Angularjs 这类 JavaScript 程序的?

[97world]

感觉现在调试 JavaScript 主要有下面两种方式.

1. 使用 console.log 输出变量, 来查看变量值是否有变化;
2. 使用 Firebug 这类扩展来监控 JavaScript 代码的执行.

好吧我经常都是用第一种方式去调试代码的, 非常繁琐, 一旦问题稍微复杂一点, 你就会看到我在代码里面加了很多 console.log. 其实这还能够接受, 另外一个问题是, 我这边的测试环境一般都不会是本机, 而是另外一台 VM, 一旦我加了新的 console.log, 就要把 js 文件给替换掉, 然后刷新页面. 整个过程非常繁琐.

现在开始更多的去使用 Firebug 去调试代码, 但是还是会有手动去替换 js 文件的情况. 我都在想是不是要写一款工具, 去实时同步本地开发环境和测试环境的 js 文件.

不知道大家都怎么解决这种情况的?

什么, 你说直接到测试环境上改代码, 好吧虽然这能够避免手动替换 js 文件的过程, 但是还是要手动刷新页面, 手动跑一下 UI 上的行为.

什么, 你说还有单元测试和自动化测试, 好吧我觉得这个确实能够解决一些问题, 单元测试我已经在尝试了. 不过对 Karma 和 Jasmine 了解得不深, 还是希望大家能够交流一些经验.

[stiekel]

单单从调试工具上，建议：
1 、编辑器中安装 SFTP 上传插件，配置保存文件后直接保存到 VM 上，比如 Sublime Text 是有这个插件的
2 、使用 Gulp 一类的工具，可以监控文件的修改，当文件变化后，可以自动刷新浏览器，当只改 css 时，连刷新都免掉了

[stiekel]

相关工具：
1 、 Sublime Text SFTP plugin https://wbond.net/sublime_packages/sftp
2 、 Gulp 自动刷新有很多，比如 gulp-webserver https://www.npmjs.com/package/gulp-webserver

[Cynic222]

webpack-dev-server, 另外个人感觉 chrome 的 F12 比 firebug 好

[ijse]

有个 angular 调试扩展： Batarang 对调试 angular 有一些帮助

console.log 太多？ 可以用 debug 模块，通过环境变量控制日志输出

调试线上环境？ 用 Fiddler 或 Charles 重定向或修改 http 请求，替换某文件很简单~

自动刷新可以用 BroserSync
或者 Webpack 的 hotreload

[zhuangzhuang1988]

都有对应的 chrome 调试工具的, angularjs 有， react 有， vue 也有

[wxx199101046]

如果你用 vue 的话 chrome 有 vue dev-tool 可一查看到项目里所有变量 实例等等
文件替换 SFTP 就好了 除了 Sublime 。 PHPSTorm WebStorm 都可以配置方便 SFTP 变动自动上传服务器