I have a load of code, and I think much of it is deprecated with numerous methods that are never called. I would like to know which methods in this code will never be called, either as a result of button clicks or via other methods. I could go through and comment out the suspicious methods one-by-one and test the code, but is there a better way?
I am using Visual Studio 2012, and I have tried using JS Lint but that doesn't seem to tell me what I want to know. I really like the Code Analysis for C# and SQL that VS2012 does, but it doesn't do this for Javascript. What should I use?
Open your JS file as the script in a webpage in Chrome. Just surround your JS with an html and script tag:
<html><script>
var mycode = goeshere();
</script></html>
Once you open it in chrome, right click anywhere on the page and click 'Inspect Element'.
Alternatively you can just press CTRL+SHIFT+J to bring up the console.
Once the pane opens, click on the 'Profiles' tab.
Select "Collect JavaScript CPU Profile", and follow the steps to run it.
This will give you timing counts per function call. Try to work through as much of the functionality as you can, then once you are finished look at the function timing counts. Any call with 0 time probably wasn't called. This should at least give you a starting point.
Related
I actually want to add a button to Gmail. When someone opens a email, he/she sees a button and when someone clicks on it, I add a function to it. I know one way but it's very intensive where I use setInterval() every 300 ms and run a function to check if it's Gmail or not and then add a button dynamically. I need something less intensive because I don't want people to have problems running my add on.
I want it all from my add on script so that I can easily communicate between other functions of my add on.
To add to pages it depends. Pages can do many tricky things (like GitHub using PJAX see this addon on how it was done).
Method 1 - addEventListener to window or gBrowser
But most usually you can catch a DOMContentLoaded or load event. Template HERE.
Method 2 - Observe http-on-examine-response and loadContext
If the URL of the nsIHTTPChannel matches your pattern then get the contentWindow from the loadContext and then manipulate. I need to make a clean template for this but you can see some messy ones: here and here
Method 3 - Add ProgressListener
ProgressListeners are nice because it helps you catch anchor changes, and usually when sites ajax and change page they change the url somehow but it doesnt really load a new page. I'm working on a template for this but it's not ready yet.
Info about addEventListener
If you add event listener in some situations it works for when 3rd parameter is true or when false. If you find one that works for your situation it will always work.
To figure out what combination works for you install this addon: event-listener-experiment-DOMC-and-load it's on GitHub so you can install straight from GitHub with this addon GitHub Extension Installer
Install that addon then navigate to your page, look in the browser console to see what feedback you're getting. It will tell you which works for you. If you need more help tell me the site and I will help you figure it out.
Here's a bootstrap template you can use once you figure out the combination:
I made a nice website that does a lot of DOM manipulation. Works very nicely in chrome and firefox. Though the client has requested now that it also works in Internet Explorer. The latest version is good enough to start with (that would be 10.0.9200.16721 in my case).
So the adventure starts, i press F12 and see a set of pretty familiar developer tools (coming from chrome and firebug). As i'm tracking the JS code i notice that the HTML tab (with the DOM) doesn't actually update.
According to the manual here http://msdn.microsoft.com/en-us/library/ie/gg589512(v=vs.85).aspx it's "a good idea to refresh the HTML tab to get the current DOM, especially when you use dynamic elements." (d0h ??) problem is .. i can't find a button to enable automatic update of the HTML tab. So i would have to click the refresh button everytime i step into a new line of JS (never mind of real-time DOM view).
But that's not all ... every time i click the refresh button the whole DOM tree view collapses. And i have to click a bunch of pluses to view the node i'm interested in.
Does anyone have a solution for this? Because what would take days will take weeks this way...
Duplicate of How to inspect elements on dynamically created DOM by using IE developers tools
From doing a little digging aroung, it seems like this is an issue other people have reported too. This thread might be of some interest to you.
The most relevant part of it:
The problem is when you modify the dom (with or without jquery) from a callback which is called by a timeout, which is in a callback bound to an event, IE freaks out and doesn't update the dom tree in the development tool. Subsequent modifications to the changed tag in the dev tool won't have any effect.
According to my tests, it's the combination of that sequence of calls that make this happen. If the dom is modified from a settimeout callback but without being inside of an event callback, it works. If instead of settimeout you directly call a function that modifies the dom, it works.
Here's a working example of what you're saying to compound the issue.
Basically, this is an issue with IE. There is no fix available at the moment. The accepted answer on the other thread seems like a very poor workaround.
I am trying to edit a website, whose UI lacks the property what I want. I can navigate over items using KeyUp or KeyDown (keyboard keys). However, when it scrolls the window, it performs unnecessary animation and I want to remove this feature.
I used Google Developer Tools to browse and edit the main javascript file, but it doesn't change the webpage's features even if I edit the code. I think it's because the script file is written in one line so that it can't be properly displayed in 'not pretty' (or normal) mode of Source tab, where I can edit the code. The reason that I am suspecting this is that the code shows until it's end in pretty mode, but in not pretty mode, the source code is cut somewhere before the end of the file.
Is there anyway to get over this problem? The website I want to modify is as follows:
https://www.gqueues.com/main
If you edit the javascript it wont execute unless it is called, so you are probably binding to keyboard events but the code never gets executed because it does when the js loads, and not when it is edited.
I would suggest adding the functionality you want using the console if you can't edit the file on the server.
Do any browsers support pausing execution / stepping through code, but only for certain files or regions? I'm using jQuery and several other libraries, and I'm not interested in stepping through their code in 99% of cases, as it is my code that is wrong. All my code is in my script file, other libraries are included separately.
If I use the pause button, I tend to find that I am very quickly taken to some part of jquery with code I don't understand or need to understand. If I click the step into button a lot, I sometimes get taken to a point in my script, sometimes not.
I could manually click every single line of my code to add a breakpoint, but this would be extremely tedious, and I couldn't un-pause execution easily. If there is a browser that lets you select multiple lines and add breakpoints to all of them in one click, that would be a great alternative, though.
There are some new features in the Chrome developer tools that can help you get a good entry point into a new code base. Event listener breakpoints will let you pause execution at a given event handler:
Things have changed since I asked the question 5 years ago. Chrome (and possibly other browsers) have an option "Blackbox script". If you find yourself paused inside a library, e.g. jQuery, right click, choose "Blackbox script" and you will automatically skip over all lines in that file when you are stepping through the code in future.
This is what step in/over/out is for. If the program is stopped for debugging, and you're stepping through and see that you're about to descend into a jQuery function (or anything else you want to skip over) you click "step over". If you got into something which you want to get right back out of, you click "step out".
Simply set the breakpoint where you want to begin debugging, and use the step functions from there to control what you're stopping to take a look at.
Put the break points in the desired javascript files and where you want to inspect your code!
Press this will let you skip the jumping to other files and you will be able to continue in the same JS file
with firebug i only knows how to see what ajax-files are called.
i have a jquery mouse click event handler bounded to a link element.
is it possible to see what javascript code is used when clicking on an element in case you forgot if you got an event handler or other javascript code coupled to it?
You can use the profiler in Firebug. Go to the Console tab, and click Profile above the message area, next to Clear. It will say that the profiler is running. Click the Profile button again, and you'll see a report on what functions were called and how much time was spent in each one.
If you're using a library like jQuery, the output may be little less clear since it will show much of the time was spent in functions from the library (i.e. F(), init(), dimension(), etc). It will show which file each function was defined in though, so you can disregard the ones that are in the library (unless that's what you're looking for).
If you're using anonymous functions, you can give them names so they show up in the profiler - see this article for a thorough (possibly too thorough) explanation.
Use breakpoints ..
reference: http://getfirebug.com/javascript
You should take a look at Eventbug (it requires Firefox 3.6, some of the docs are old):
Downloads:
http://getfirebug.com/releases/eventbug/1.5/
Some background:
http://www.softwareishard.com/blog/firebug/eventbug-alpha-released/
Just add 'debugger;' at your onclickevent, and happy debug it.
*Important: you gotta open the firebug panel and Reload the page