当 gulp 为应用程序提供服务时如何在 webstorm 中调试 Javascript

Question

在 Webstorm 中，我正在运行 gulp serve 任务，该任务启动 localhost:9000 由 yo 生成的 stub angular 项目。 我正在尝试调试 JavaScript 代码，这就是我尝试过的：

• 我将 gulp 作为调试任务运行，我只能调试 gulp 文件行
• 我尝试在 JavaScript 之前运行 gulp serve，它开始提供服务，而 Webstorm 永远无法启动它的 JavaScript 调试会话
• 我尝试运行 JavaScript 调试，但我的代码中没有断点。

这种情况下的工作流程是什么？

附言。我不是在尝试在 chrome 开发人员工具中调试代码，我希望我的断点在 Webstorm 中工作

Answer 1

在您的 Javascript 中 - 将 debugger; 放在您的两行之间，然后在 Chrome 中打开您的 Developer Tools。当您刷新页面时 - 如果您的脚本运行，它应该在您放置 debugger; 的位置停止，您将能够将鼠标悬停在不同的变量上以查看它们的值。非常强大的基本工具。

此外，如果您不想让脚本停止 - 您可以console.log(variable); 让开发者工具控制台打印出变量。

例子：

var somethingOrOther = function(){
var blah = 'foo';
console.log(blah);// to print to console
debugger; // to stop script at this point and look around
};

完成后不要忘记删除debugger;。 我建议在你的 gulp 中使用jshint，以确保你不会错过这些东西。