I've been having a lot of issues with chrome debugger. Sometimes I can't enable breakpoints at certain positions, other issues include random pauses at lines without breakpoints, can't evaluate variables that are absolutely defined.
The most weird thing I've seen, and am eager to work around, is the following:
I reached here from an event listener breakpoint, as one can see in the right pane. At first I put a breakpoint at line 4121 where I want to see what elem is. It can't be evaluated, saying it's undefined.
Now I commented out everything. It still hits the code. Notice the highlighted region. It's not my selection. It's the code that's yet to be executed. The highlight does not make any sense.
What can I do to get better debugging experience?
EDIT: I just tried with Firefox, to my surprise it behaviors almost the same with Chrome (i.e. hit the commented out code). There might be some rational explanations to this.
The information in the Call Stack and Scope panel doesn't match what is in the code where it is paused. Your app is running with a minified version of jQuery, but the uncompressed version is shown in Sources.
You should see the following in those panels if you are running the uncompressed version on it's own. If you use the minified version, you should see what you already have, but the Sources view will show the minified version, unless you have the Source Map configured. Since it appears you commented out the code in the uncompressed version, you're probably not using Source Maps.
Side note: If you do use Source Maps and edit the minified version, you would have to regenerate the map, otherwise the mappings will be all wrong.
That makes me think it's more likely to be an issue caused by having multiple references to jQuery. Make sure you only have one reference to jQuery in your solution, otherwise you can't guarantee which version is loaded at a given time.
If you have made edits to the Javascript in Dev Tools you will need to ctr+s (Save) the edits before you can enable breakpoints.
Related
When writing code in cshtml files, sometimes intellisense goes haywire and starts writing text several lines above where I am actually typing. At the moment it seems to be limited to when I hit the tab key to let it finish a property name which isn't too bad because I can just not do that. However, it also seems to happen at other times like just when I type #Model and then press a period it might write the word Model in some other part of the code file.
Anyone know how to correct this?
This would probably fit better as a VS Feedback item, but since this is the only place I have found someone referencing the same issue, I thought I would add some confirmation. I do not have a solution, only more examples to add. This issue has been annoying me for months! It seems to happen most often when typing razor code inside of JavaScript, especially inside of a quoted string.
Here is an example from a test project, where I am attempting to put a reference to a model field into a JavaScript string. Notice that I click tab a couple times and it doesn't actually insert the intellisense result at the point I am typing. But when I scroll down you can see it inserted it randomly in another spot pretty far away!
I did also try to remove the hidden .vs folder, bin/, and obj/ and could still reliably reproduce the issue after restarting Visual Studio. Currently on 1 before the latest (16.9.4). I did notice that if I re-open this cshtml file, wait until the file seems to be fully loaded (all the red errors go away), I also reliably get an ArgumentException that occurs as I begin typing. Then when I scroll down I already see that Model has been randomly inserted in another spot in the code.
I'm going to try updating to latest (16.9.5), and starting in Safe Mode to skip loading all 3rd-party libraries, and see if the issue is still reproducible, in case it is caused by one of the handful of extensions I am currently using.
Edit: Well same issue with 16.9.5. Trying to use Safe Mode is a no go, it makes the intellisense and syntax coloring completely disabled for .cshtml files.
I want to learn more about the inner workings of a website and the chrome dev tools (breakpoints, variable watching, call stacks etc.) are amazing. Couldn't wish for more. However, at huge files, the tools freeze which has been asked about many times.
I'm actually looking for alternatives on that. The debugger is perfect but its ability to break down over bigger files make it useless for this. A bit like notepad.exe on windows - the freezing is really arbitrary as computers can handle much more lines.
I've also noticed that beautified code causes less issues than minified one-liners so that might be the reason. But there is no way to display a minified version by default.
I've been doing a lot of testing in IE10 lately, and have recently ran into a very strange error.
Right after closing a jQuery UI dialog, IE10 opens up a cursor and allows the user type directly into the page. However, there are no inputs for them to be allowed to put things in, and from using Microsoft's F12 Developer tools, it seems that it is writing directly into the DOM -- an area that was a 'Text - Empty Text Node'. I have no idea where these nodes are coming from, or why the user can put text into one of them. I really have no code to show because it seems to be tied to nothing, and as I keep cutting away layers it still seems to be there.
Has anyone else ran into this? It seems to happen in IE9 as well. I'm at a loss here.
EDIT: In addition, I thought it may be helpful to say that I'm using jQuery datatables here.
Okay, so I have made some progress on this.
It turns out IE10 isn't writing data directly into the DOM -- instead, it dynamically created a text input, didn't recognize it, and then deletes it. You can type directly into it, but if you click off or focus on anything else, then it disappears and leaves completely.
I've still not diagnosed the source of the issue -- I know it only happens in IE, and may include datatables or jQuery UI. I tend to believe it's IE specific, because it's such a rare action and there's no trace of it anywhere else.
Hope this dialog helps someone else down the line. If you find a better answer, please post it!
I have a plugin/activex built with Firebreath (don't know which version, I think at least 1.6 - if somebody tells me where to look I'll update here).
In IE8, but not in IE9 or Chrome, memory usage grows by several MB on each page refresh.
My suspicion is that this means I have a circular structure in javascript, which is also holding a reference to the plugin. Or to the DOM element that contains the plugin? We don't build anything 'big' in javascript, so my focus falls on the (several MBs of) DLLs that comprise the plugin. Is that a reasonable idea? What else might cause this and/or how do I debug it?
Usually this is a circular reference inside your plugin; not in the javascript, but in your c++ code. There may be a bug that has crept up, though, that is causing this issue. Try the latest from github (master branch) and see if there is a change.
I would like to know if it is possible to modify Chrome or Firefox display settings, so that it would only show rectangles of HTML DOM objects? What I want to do is to decrease rendering engine job amount as much as possible, so it would only build layout of the page.
People usually refer to this mode of operation as "headless" (i.e. without UI).
Usually there's an additional requirement - to be able to run it server-side without the usual for client software installed. If you're running it client-side, I wouldn't bother about optimization, it shouldn't give you a big win anyway.
Otherwise, try searching using that term. I've seen it asked for several times, but haven't seen a working out-of-box solution.
[edit] just saw http://hg.mozilla.org/incubator/offscreen, which seems to be a headless version of Mozilla.
I wouldn't go as low-level as modifying the renderer. Instead, I suggest you use Firefox's Greasemonkey to replace the elements from the page with whatever it is you need. You'll need to know a bit of JavaScript, but it's not that hard.
However, this will only work on client side. If you want to do this on server-side ( so that it will work on any page a user requests through your own ), my guess is you'll need to grab the page's content in a string, and then modify it using a HTML parser.