how to debug the js in jsfiddle
DebuggingAngularjsJsfiddleDebugging Problem Overview
I am looking at this jsfiddle: http://jsfiddle.net/carpasse/mcVfK/ It works fine that is not the problem , I just want to know how to debug through the javascript. I tried to use the debugger command and I cant find it in the sources tab? any idea how I can debug this?
some code from the fiddle:
angular.module('app', ['appServices'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/home', {templateUrl: 'home.html', controller: HomeCtrl}).
when('/list', {templateUrl: 'list.html', controller: ListCtrl}).
when('/detail/:itemId', {templateUrl: 'detail.html', controller: DetailCtrl}).
when('/settings', {templateUrl: 'settings.html', controller: SettingsCtrl}).
otherwise({redirectTo: '/home'});
}]);
Debugging Solutions
Solution 1 - Debugging
The JavaScript is executed from the fiddle.jshell.net folder of the Sources tab of Chrome. You can add breakpoints to the index file shown in the Chrome screenshot below.
Solution 2 - Debugging
Use the debugger;
statement in the code. The browser inserts a breakpoint at this statement, and you can continue in browser's debugger.
This should work atleast in chrome and firefox. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/debugger
angular.module('app', ['appServices'])
.config(['$routeProvider', function($routeProvider) {
// *** Debugger invoked here
debugger;
$routeProvider.
when('/home', {templateUrl: 'home.html', controller: HomeCtrl}).
when('/list', {templateUrl: 'list.html', controller: ListCtrl}).
when('/detail/:itemId', {templateUrl: 'detail.html', controller: DetailCtrl}).
when('/settings', {templateUrl: 'settings.html', controller: SettingsCtrl}).
otherwise({redirectTo: '/home'});
}]);
Solution 3 - Debugging
Something worth mentioning. If you are ever using chrome dev tools. Press ctrl+shift+F and you can search through all the files in the source.
Solution 4 - Debugging
In addition to the other answers.
Very often it is useful just write debug information into the console:
console.log("debug information here");
The output is available in browsers dev tools console. Like it was logged from the usual javascript code.
This is quite simple and effective.
Solution 5 - Debugging
Adding a debugger statement in the code and enable the "Developer Tools" in the bowser. Then when you are running the code in JSFiddle, the debugger will be hit!.
Solution 6 - Debugging
One of the answers above works but just that you need to add the keyword debugger at the line you want the break points and run the code which will then fire them on the dev tool. The code then gets visible at the source tab under editor_console=true.
Solution 7 - Debugging
Solution 8 - Debugging
The JavaScript is executed from the file ?editor_console=true
in the folder result (fiddle.jshell.net)/fiddle.jshell.net/_display
folder of the Sources tab of Chrome when using the developper tool. You can add breakpoints to your code then and refresh the page.
More information on using chrome debugger can be found at https://stackoverflow.com/questions/33638604/trying-to-debug-javascript-in-chrome/37076258