We Keep Coding

Breakpoints in WebStorm not hitting for JavaScript debugging

I have the following configuration setup in WebStorm:
When I click debug, it launches Chrome fine and navigates to the page, but my breakpoints never get hit. It's connected somehow though because I see all of the console.log() output in WebStorm.
I'm trying to navigate to the URL specified in the screenshot and have breakpoints in main.js get hit, but it doesn't work as expected (see: at all). I'm not exactly sure what I'm missing. I've tried setting a remote URL for the specific main.js file in the Remote URLs section, but that didn't help either.
For reference I run the application via bra run and npm run watch.
Quick Update
So I've been able to actually get a breakpoint to hit, but it's in a different file (in a different path):
../public/app/core/routes/dashboard_loaders.ts allows me to stop at breakpoints, but ../public/dashboards doesn't.
When I navigate to http://localhost:3000/dashboard/script/main.js?orgId=1, it hits the route:
.when('/dashboard/:type/:slug', {
templateUrl: 'public/app/partials/dashboard.html',
controller : 'LoadDashboardCtrl',
reloadOnSearch: false,
pageClass: 'page-dashboard',
})
Which ultimately does load the file ../public/dashboards/multi.js -- but no breakpoints are hit.
Further Updates
It looks like the script is served via the following command (in ../public/app/features/dashboard/dashboardLoaderSrv.js):
/*jshint -W054 */
var script_func = new Function('ARGS','kbn','dateMath','_','moment','window','document','$','jQuery', 'services', result.data);
var script_result = script_func($routeParams, kbn, dateMath, _ , moment, window, document, $, $, services);
Where $routeParams are type:script and slug:main.js - If I step into this function, I get an anonymous(?) file that's identical to my actual main.js file, but the name is like 43550 instead of main.js -- I think this is boiling down to a fundamental lack of knowledge in how JavaScript handles something on my part. :)

Edit: I found this issue for using webstorm with grafana (second edit) looks like this is you.
I think what he linked solves it with declaring a sourceUrl then your file isn't "anonymous" or rather dynamic.
//# sourceURL=filename.js
I.E
//# sourceURL=main.js
Reference How to debug dynamically loaded JavaScript (with jQuery) in the browser's debugger itself?
Here is the documentation and video on debugging in webstorm to make sure everything is setup properly. (I.E My default setting were to debug my index file instead of my project). Make sure you have their Chrome extension or Firefox Extension
General JS Debugging in Webstorm
Debugging for Chrome in Webstorm
Debugging for Firefox in Webstorm
Debugging Node.JS in Webstorm

Javascript error in production only

I'm having trouble identifying a javascript error that is happening in production only. The error is:
Uncaught TypeError: (intermediate value)(...) is not a function
With a link to line 22182 in file: https://d2wvl99qs6f2ce.cloudfront.net/js/358ee32eac3992e61f9fa13a0c55203d.js
Clicking on the link, Chrome debugger shows an error at the following line:
(function(jQuery){
Here are some excepts around the line above:
/*
* jQuery SelectBox Styler v1.0.1
* http://dimox.name/styling-select-boxes-using-jquery-css/
*
* Copyright 2012 Dimox (http://dimox.name/)
* Released under the MIT license.
*
* Date: 2012.10.07
*
*/
(function($) {
$.fn.selectbox = function(options) {
...
}
})(jQuery)
/* jquery.nicescroll
-- version 3.5.0 BETA5
-- copyright 2011-12-13 InuYaksa*2013
-- licensed under the MIT
--
-- http://areaaperta.com/nicescroll
-- https://github.com/inuyaksa/jquery.nicescroll
--
*/
(function(jQuery){
...
})( jQuery );
Looking at the code and the error, it seems like I should change line:
})(jQuery)
to
})(jQuery);
This change would be consistent with my research that this error is commonly caused by a missing semi-colon. But, when examining the code used in my development environment, the same code (without the semi-colon) is not producing any error. I've tried setting breakpoints before the error so I can pause execution, add the semi-colon, and then continue execution but that hasn't been very informative (maybe I'm using the debug tools incorrectly...)
I'm struggling because:
The code in my development and production environment are the same (checked via github comparison).
I can't replicate the error in my development environment which limits my ability to debug.
The file, https://d2wvl99qs6f2ce.cloudfront.net/js/358ee32eac3992e61f9fa13a0c55203d.js, is a compilation of the js files from the head of my application. But, why is Chrome serving it from cloudfront?
What are some ways I can begin to identify the source of the problem? Is there a way I can modify code in Chrome Developer Tools or Firefox's Firebug to add the semi-colon and the continue execution? I've even tried pasting the javascript into JSfiddle but that broke fiddle (file is too long to paste). If it makes any difference, I'm building a Magento 1.9 application...

Turns out the answer is related to Magento. In the admin backend of Magento, there is an option to merge all javascript errors (Admin -> System -> Configuration -> Under Advanced tab go to click Developer -> Javascript Settings -> Merge Javascript files). When Javascript files are merged, all javascript errors that are normally ignored (such as a missing semi-colon in certain places) prior to the merge trigger errors. In my case, javascript files were being merged in production (for performance reasons) but not in the development environment.
In my case, the production environment was merging the javascript files while the development environment was not. Since there was a missing semi-colon I had noticed in the file above (see the question), the code in production was failing while the code in development worked.

How do I change the underlying Phantomjs object settings using Chutzpah?

We have some QUnit javascript tests running in Visual Studio using the Chutzpah test adapter. Everything was working fine until we changed our api (the one being tested by the js files) recently, and added some validations over the UserAgent http header. When I tried to update the tests to change/mock the user agent I realized it was not directly possible even by overriding the default browser property.
After a few days of scavenging, I finally found what exactly is happening. Chutzpah is creating a phantomjs page object for the test files to run on. This is being done on a base javascript file (chutzpahRunner.js) located at the Chutzpah adapter installation path. These are the last lines on the file, that effectively start the tests:
...
// Allows local files to make ajax calls to remote urls
page.settings.localToRemoteUrlAccessEnabled = true; //(default false)
// Stops all security (for example you can access content in other domain IFrames)
page.settings.webSecurityEnabled = false; //(default true)
page.open(testFile, pageOpenHandler);
...
Phatomjs supports changing the user agent header by specifying it in the page settings object. If I edit this chutzpahRunner.js file in my machine, and manually set the user agent there, like this:
page.settings.userAgent = "MyCustomUserAgent";
My tests start to work again. The problem is that this is not in the project itself, and thus cannot be shared with the rest of the team.
Is it possible to change the properties of the phantomjs objects created by Chutzpah to run the tests? I'd like to either change them from inside my own tests, or from another script file I could embed on the pipeline.

Without a code change in Chutzpah it is not possible to set those properties on the PhantomJS object. Please file an issue at https://github.com/mmanela/chutzpah asking for this functionality and then fork/patch Chutzpah to add it (or wait for a developer on the project to hopefully get to this).
Update:
I pushed a fix for this issue. Once this is released you can use the following in a Chutzpah.json file:
{
"userAgent": "myUserAgent"
}

Why does html5 boilerplate use Twipsy and Prototype when it builds jQuery code?

So I just finished writing a single page with html5 boilerplate and everything is find with the dev code (the original one I just finished writing). Google Chrome and Firefox love it and display it well.
So I use the ant script ( ant build or ant text to skip jpeg/png optimization ) and browse to /publish/ to view it. And I got a javascript error :
Uncaught TypeError: Cannot read property 'Twipsy' of undefined
But the fact is I never used Twipsy or prototype, just jQuery ... so I run a javascript debug console and see in the generated javascript file a reference to Twipsy and Prototype. But I never use any of those in my code. So what's wrong ? and what can I do ?

Html5Boilerplate use a kind of very strong cache which actually keep the files you already delete in your project and always inline / include it in future build. You must delete publish and intermediate forlder to kepp your builder up to date.

Visual Studio 2008 doesn't show my XML comments in JS files

function Submit_click()
{
if (!bValidateFields())
return;
}
function bValidateFields() {
/// <summary>Validation rules</summary>
/// <returns>Boolean</returns>
...
}
So, when I type the call to my bValidateFields() function intellisence in Visual Studio doesn't show my comments. But according to this it should. Should it?

I recall an issue where having turned off the Navigation Bar in VS stopped a lot of the JS intellisense from working properly. If you have it turned off, try turning the Navigation Bar on again and see if it helps.
Edit: You may also have to do Ctrl+Shift+J to force the IDE to update the intellisense.
Edit2: As #blub said, if there are any issues with the javascript, the intellisense can break. Visual Studio actually evaluates the javascript to create the intellisense, so if there are syntax errors it can fail and not build the intellisense completely, or at all.

The XML comments have to be inside the function, not above it.
In Visual Studio 2008, the XML comment information is only display for files referenced with a /// <reference... item.
Visual Studio 2010 will display XML comment information for functions in the file your are editing and for files you are referencing.

Did you try adding the /// <reference> comment at the top of the external library? I've run into this in the past and it resolved my issue.