Debugging javascript in chrome, how can i change the names of the variables in the debugger (_17, _18...) for the real names of the variables in source code?
if (_17) {
try {
var _18 = _17(_c);
if (_18 && typeof _18.then === "function") {
_18.then(_6.hitch(_16.deferred, "resolve"),
You need to use source maps when you build your code, then hook them up properly. That's what'll tell Chrome (and other modern browsers) what the real code is and it should link it up for you.
How you generate source maps depends on exactly how you build and minify your code.
Whatever minifier/compressor you're using should have an option to produce a "source map" which can be used, along with the original pre-minified source code, to allow you to debug while looking at your original source code even though the browser is running the minified version. If the map exists and is alongside the generated .js file, Chrome will pick it up automatically.
That said, normally you wouldn't minify source code during development.
More about Chrome's support for source maps here.
You can click with the right button in a variable that has been logged and save it to use as a temporary local variable.
Related
I am working an issue and problem is code is huge and deployed on some remote location and takes a lot of time to go through this process. Now, I know that in chrome developer tools we can open javascript files and modify/save them but problem is, changes are not reflected in application. for example, hello.js has something like this,
sayHello : function() {
// some existing code here.
}
now, developer tools allows to modify this file to look like,
sayHello : function() {
// some existing code here.
// additional code added at runtime.
}
but problem I am facing is, this additional code is not reflected when I execute
sayHello()
function again.
Note: I am not trying to load any new script here.
It's hard to say without some more input on your action, but could be that you are changing the source code (in the browser cache) and you expect the object already in memory to change as well? In case put a break point before the object is instantiated and change the code at that moment and see what happens.
I am dynamically loading and running JavaScript code that is stored on disk in a YAML file. I would like to know if it is possible (using intelliJ) to debug the JS code even though I am not loading it from a standalone JS file. To simplify the problem description, consider the following Java code:
NashornScriptEngineFactory nashornFactory = new NashornScriptEngineFactory();
ScriptEngine engine = nashornFactory.getScriptEngine();
engine.eval("var a = 1 + 1;\nprint(a);");
How do I set a breakpoint on line two (the "print" function call) and how do I examine the value of variable "a"? If this is not possible, what would be the best workaround?
Based on this blog post https://blogs.oracle.com/sundararajan/remote-debugging-of-nashorn-scripts-with-netbeans-ide-using-debugger-statements, you can just attach a remote java debugger to process.
You can do this in IntelliJ IDEA by creating a new remote run configuration.
After attaching, use the JavaScript command:
debugger;
This will force the debugger to break if it is attached. You can then inspect the values of variables within the variable window.
If you can't manage to attach IntelliJ, open the browsers inspector/debugger and this same line of javascript will cause the browser's debugger to break on that line.
I am creating some helpers scripts in my web app, which I run from the console, to output some information about the current state (e.g. JSON.stringify of objects). For example, I define the temporal window.Foo method, I open the Chrome Console, and run Foo(). It would be great if I could use the Console method copy, which copies some value to the clipboard.
I've checked that if I define a function that uses copy inside the Chrome console, it works, but as expected, if I define it in a regular JavaScript file, it doesn't. Do you have any clue how can I access this method through an API or something (if it is even possible)? Any possible workaround to copy info from a script to the clipboard without having to type copy?
The fastest solution is to wrap the script with copy (e.g. copy(Foo())), but that means extra typing... I was wondering if it could be done faster.
Thanks
I'm not sure, if you mean exactly this, but maybe it could helps you- look in the sources tab :) There you can see all loaded scripts (and also make breakpoints, etc.)
I'd like to set a breakpoint in a "Cart.add" function in the Chrome or Safari JavaScript debuggers. Problem is, this function is defined in a large minified JS file, and doesn't exist on a line by itself.
Some documentation says that the WebKit-based debuggers support "break" or "debug" commands in the debug console, but those don't seem to work in newer versions of the debugger.
Setting a breakpoint on that line of the JS file doesn't work either, since there are lots of functions on that line.
Any suggestions?
In Chrome when you open Scripts tab you can prettify selected file by clicking on { } button ("Pretty print") at the bottom. After that you can find your line and set a breakpoint. The code will remain prettified with breakpoints in place after a page refresh.
The debugger statement is probably what you're looking for.
Evaluating the DebuggerStatement production may allow an implementation to cause a breakpoint when run under a debugger. If a debugger is not present or active this statement has no observable effect.
The production DebuggerStatement : debugger ; is evaluated as follows:
If an implementation defined debugging facility is available and enabled, then
a. Perform an implementation defined debugging action.
b. Let result be an implementation defined Completion value.
Else
a. Let result be (normal, empty, empty).
Return result.
The break statement is for exiting loops and switch statements and has nothing to do with debugging.
The real solution though is to not bugger your code in the first place :)
1) The error message should give you a link to the source code in the
Sources tab. Click on that link to get taken to the transpiled code.
2) Click the "{ }" icon at the bottom of the source code in the
Sources tab to format the transpiled code for easier debugging.
3)Stick a breakpoint at the line that is failing.
4) Reproduce the
problem again. This time, it should break at the breakpoint before
the error occurs.
5) Examine the local variables and call stack to
determine what exactly is going wrong.
For chrome users, you'll want to enable automatic pretty print in the experimental features.
setting your breakpoint should work now.
If you have saved the webpage then beautify your js file using jsbeautifier.org which formats your entire script. Then replace your js content with the beautified version. From here you can debug your JS easily
With firefox w/firebug, can I type javascript into the browser and test things?
Can I also reference functions/objects from .js files references in the html?
Short answer: Yes, you can, by using the console.
Longer answer: Take a look at the What's new in Firebug 1.6 video, it gives an excellent demonstration on what you can do with the console, including auto-completion of the available variables.
Everything that's available globally in the current document is available to the console. So if you included jQuery on the current page, it'll be accessible from the console too.
Yes, if you enable the console tab you can use it as a Javascript REPL. From there you should be able to access any variables and objects in the global scope.
yes, you can... while on firebug (1.6.1) click 5th button from the left, its like a bunch of lines, entitled show command line then you will see it.
as for your second question... u can use it as long as it is on the DOM otherwise goodluck to u :)