I'm trying to debug quite a complicated module in my angular app. I've set a break point at the start of a particular method hoping I could follow it through and see where it's giving me back an error. However, it keeps bringing me into the VM scripts (VM28337, VM30559, etc). I can assume these all work as they should, so I have no interest in seeing them.
I know I can blackbox certain scripts in chrome debugger, but there seems to be an endless amount of these VM scripts. Does anyone have any suggestions on how to circumvent these scripts?
This doesn't appear to be possible in any version of Chrome at the moment. However, I create a Chromium bug to request it get added: Chromium Issue 526239
A development-time-only workaround can be to override eval in your page -
(function ()
{
var originalEval = eval;
eval =
function (script)
{
return originalEval(script + "\n//# sourceURL=blackbox-this.js");
}
}());
And then blackbox ^.*blackbox-this.js$
Same for setInterval/setTimeout when it gets a string (but that is a bad practice anyway, right? ;))
Does that work for you?
Related
I had a react app that was working fine before my computer was force shut. I am using npm start to serve my app in a local server. When I reopen my computer and start my server the first page( the "/" url) works fine, but when I push a new url to the history( props.history.push("/pages")), the browser freezes and it give me this error . This was in chromium and I even tried it with other browsers like firefox but the browser just freezes. Assuming the problem might be with my computer I have also tried other devices on the network and the same problem keeps happening. I have even cleared the npm cache by npm cache clean --force. But nothing solves the problem and it is frustruting to debug since nothing is printed on the dev tools and no error message is throwen by react. If some one has come accross such a problem would like to hear a suggestion.
This had happened to me a couple of times. This seems to keep happening in chrome browser when you have an array and you are pushing too many items to it (it is like
stackoverflow:)
). You may want to edit your question so that more people can benefit from these, it isn't actually a react problem. It is a limitation in browsers I guess. They should at least warn you about what the error is. so for anyone who wants to regenerate this problem use the following code in the chromium console or run any js script on your chromium browser.
let arr = [];
let arrcounter = 13;
for (let x = 1; x <= arrcounter; x) {
arr.push(x);
}
This is an infinite loop as x isn't being incremented, which means an infinite amount of 1's are pushed to the array which causes the above error. This atleast was in my case. There might be other reasons for this problem to be caused, but check for such a mistakes in your code because neither your browser (which is a bammer) nor your editor notify you about such mistake. If this solves your mistake let me know.
As to how to debug your code.
You can start by commenting out all your code except the necessary react requirements then uncommenting each part in a controlled way to see which part of your code is causing the problem.
I am using AppEngine, NodeJS (Standard), I have accepted the license agreements, and I am initializing the Debug Agent this way:
require('#google-cloud/debug-agent').start({ allowExpressions: true });
I can see all the logs for my application in the Logs Viewer, all the requests are here.
When opening the Stackdriver Debugger, it recognizes what is the current source code running, and displays it. I try adding a few snapshots and logpoints, as basic as this:
if (true) logpoint("Hello World!")
It is waiting for hits, but obviously missing them. There are also no logs related to my logpoints. However, I can see the standard logs outputted by my app. Everything seems to work except the Stackdriver Debugger, even though it doesn't seem to complain either.
I have looked at everything and made sure everything was set up properly but I am not sure how to "debug the debugger" further.
Is it actually even working, and people are using it with NodeJS in Standard mode?
What can I check? Any way I can see errors related to the Debugger itself?
Prior to the „request” statement, how did you set up your project in Stackdriver Debugger for node.js? You may check Setting Up Stackdriver Debugger for Node.js as reference.
To reproduce this issue, one needs confidential information, such as details of your project and sample code. It is much easier to protect your information in the Public Issue Tracker. You are encouraged to open a similar issue there.
I'm having some trouble with WebExtensions in Firefox. I've got some code to track downloads, and it's working in Chrome, but not in FF.
I've boiled the code down to the minimal surface that works in Chrome but not FF:
function handleChanged(delta) {
console.log(delta);
}
chrome.downloads.onChanged.addListener(handleChanged);
Whether I use chrome.* or browser.*, the behavior remains the same: it doesn't work. I've tried executing this line:
console.log(chrome.downloads.onChanged.hasListener(handleChanged));
After adding the listener, and it does log a value of true. Oddly enough, adding an onCreated listener works just fine:
function handleCreated(delta) {
console.log(delta);
}
chrome.downloads.onCreated.addListener(handleCreated);
This yields the expected object dump in the console when a download is started. Unless I'm missing something extremely obvious, I'm inclined to think this is a bug. It is not mentioned to the incompatibilities list, and it is documented by Mozilla. The thing is, I don't see anybody else asking this question online, so I'm inclined to think a bug is unlikely and I'm messing something up.
If it helps, I'm running Firefox 51.0.1 (32-bit) on Windows 7 Enterprise x64 inside of VMWare Workstation on a Windows 7 Enterprise x64 host. I'm loading the extension using the "Load Temporary Add-on" button. It's not a problem with the core manifest or add-on itself, because three other types of listeners are working just fine. The script is running as a background script.
I appreciate any guidance. Thanks!
I would like to have something like binding.pry in ruby, basically, I want to be able to add a line to my code, and have a debugger stop there, while karma is running my angular/jasmine tests
it('runs my jasmine test', function () {
var a = true;
binding.pry // stops code and enters REPL prompt
expect(a).toBe(true);
});
The result would then be a prompt
#
Where I could do things to the variables available in that scope, at that point in time
# a = false;
Then I could exit and continue execution.
# exit
Just like debugging with dev tools, but I would like to have this outside of the browser environment and inside the terminal under a karma process.
I've also found https://github.com/alidavut/locus, however it doesn't seem to work under karma.
I'm not aware of any way to launch a repl in the karma process, but what you can do is simply write:
debugger;
at the point where you want to debug. Then, if you have the browser's dev tools already open when that line is executed, the execution will pause and you'll be able to use "watch expressions" which might be enough for you. You have access to the call stack and all the local variables. You can also assign to local variables in a watch expression and the new values will persist when you resume execution.
I've only tested this on Chrome. What I have to do is:
Put the debugger; statement in.
Start karma.
Open the Chrome dev tools.
Save one of the watched karma files (so now the tests will run again with the dev tools already open).
Profit!
Making a REPL on the karma side would require a lot more effort as all the test code is executed on the browser. To control a REPL from the karma process you would need to setup events to communicate via the sockets that karma sets up to talk to the browser. Should be doable though if you're so inclined. EDIT: actually, to do this you would still need to be able to make Javascript block execution at a particular statement, and I'm pretty sure that debugger; is the only way to do this.
Are there any particular tools available for "Debugging" ExtJS script ? Especially, I findi it difficult to debug when the screen goes blank.!
Aptana Studio is optimised for Javascript development, including debug support for Firefox and IE, it even supports type-ahead on the Ext JS library (you might have to download some eclipse plugins separately).
Ext JS comes included with a debugging console (you need to add debug.js and call Ext.log("blah") to bring it up), this will provide functionality that is similar to Firebug on Firefox but not as extensive, still its useful for supplementing the poor development tools that come pre-installed with IE 8. Firebug (as Ergo mentioned here) is the most powerful of the browser-based development tools (it allows step-by-step debugging) however the latest versions of Chrome and Safari also come installed with develoment tools that are useful (but not as much as Firebug).
I find that running a debug trace throughout your application speeds up the process of finding bugs (see example below).
// Setup simple debugging tool
DebugManager = function {};
DebugManager.isEnabled = true;
DebugManager.log = function() {
if (DebugManager.isEnabled && arguments.length && console && console.log) {
try {
// Single parameter? pass it to console
if (arguments.length == 1) console.log(arguments[0])
// Multiple parameters? output raw arguments array to the console
else console.log(arguments);
} catch (e) {}
}
};
// Your function
function doSomething(myString) {
DebugManager.log("doSomething(myString)", myString);
// code for doSomething
}
You can then look up the console trace (Firebug is the best since it outputs full object information) and note the last function that executed before your code broke.
After many months of Ext JS development I have to say that Firebug + Aptana Studio combo wins hands down on other tools for development.
The Firebug Extension for Firefox is one of the best, to debug and test any web based framework. It wont necessary hand hold you, and you will need some familiarity with standard debug procedures, but is an excellent start. JSLint is another, online tool, for more advanced users.
I have found by changing my coding style, I've actually written more bug-free code. Usually when I see blank screens in IE, it has to do with trailing commas. I've started writing my ExtJS/JSON like this:
{
id: 'foo'
,name: 'bar'
,width: .60
,text : 'I am Jack\'s formatted code'
}
What this allows me to do is to move/comment/uncomment code around without having to worry about leftover commas. This coding convention has helped me greatly when it comes to refactoring other people's code as well as my own. Visually, it also becomes easier to ensure that the code is formatted properly.
I use chrome.
We can easily debug using "F12" to get the console, where it point out the line where the loading crashed, on clicking this line it goes to the cource to show the exact line of code.
Chrome's Development tool is that best so far when it comes to debugging ExtJs scripts. I've also used -
FireFox Developer Edition - This is pretty good and has lot's of tools available but for some reason I find it a little sluggish when debuggin ExtJs apps (CMD built in a single js).
IE Developer Tool - I know almost everyone hates it but sometimes we just have to live it with. (I find it not really bad). One problem is again - Very slow and hangs a lot of time while loading a big script. The whole script file is not even loaded at times - I forgot the exact figure but it's source viewer has a size/buffer/memory limit and cannot load the whole script and truncates whatever it cannot load - so you can get to your lines if the line exceeds that. This also happened in Firebug. But I've never faced such loading issues in Chrome.
Then again there are issues that happen only in certain browsers and you're stuck with debugging in that browser.