如何在gulp服务应用程序时在webstorm中调试Javascript [英] How to debug Javascript in webstorm when gulp is serving the application

问题描述

在Webstorm中，我正在运行gulp服务任务，该任务启动使用哟生成的localhost：9000存根角项目。
我试图调试JavaScript代码，这是我试过的：

• 我运行gulp作为调试任务，我只能调试gulp文件行


• 我尝试在JavaScript之前运行gulp服务器，它开始提供服务，Webstorm永远不会启动其JavaScript调试会话
  
• 我尝试运行JavaScript调试，我的代码中没有断点。

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

PS。我不想在Chrome开发人员工具中调试代码，我想让我的断点在Webstorm中工作

解决方案

调试器; 在你的两行之间，在Chrome浏览器中打开你的 Developer Tools 。刷新页面时 - 如果脚本运行，它应停止放置调试器; 的位置，并且您可以将鼠标悬停在不同的变量上以查看它们的值。非常强大和基本的工具。

另外，如果您不想让脚本停止 - 您可以 console.log（variable）;



<$ p 让开发者工具控制台打印出变量。

$ p> var somethingOrOther = function（）{
var blah ='foo';
console.log（blah）; //打印到控制台
debugger; //此时停止脚本并查看
};


不要忘记删除调试器; 当你完成。
我建议在你的一using中使用 jshint 来确保你不会错过这些事情。

In Webstorm, I am running gulp serve task that launches localhost:9000 stub angular project generated with yo. I am trying to debug JavaScript code and this is what i have tried:

• I run gulp as a debug task, I can only debug gulp file lines
• I try to run gulp serve before JavaScript, it starts serving and Webstorm never gets to launching its JavaScript debug session
• I try to run JavaScript debug, I don't get breakpoints inside my code.

What is the workflow in this situation?

PS. i am not trying to debug code inside chrome developer tools, i want my breakpoints to work in Webstorm

解决方案

In your Javascript - put debugger; between two of your lines, and pop open your Developer Tools in Chrome. When you refresh the page - if your script runs, it should stop where you put the debugger; and you'll be able to hover on different variables to see their values. Very powerful and basic tool.

Also, if you don't want to have the script stop - you can console.log(variable); to have the Developer Tools console print out the variable.

Example:

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

Don't forget to remove the debugger; when you're done. I recommend using jshint in your gulp to make sure you don't miss those kinds of things.

这篇关于如何在gulp服务应用程序时在webstorm中调试Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！