Javascript: How to single-step site initialization? - javascript

Short background: I'm pretty new to Javascript and currently interested in customizing third-party websites to my needs — i.e. write scripts for Greasemonkey and the like. Often those sites are bloated with libraries like Jquery, Bootstrap, etc. which makes it even harder to figure out how exactly they work.
When I analyze a new website and want to know what code gets executed, I can use Firebug to create breakpoints or watchpoints and then single-step through the code. However, this does not work for code that already runs while/when the website first loads. How can I single-step through this part? Basically I'm looking for a way to set a breakpoint to the point before even the first Javascript code is executed.
If there are better tools for this than Firebug I'm all open for suggestions. Please keep in mind that I do not control the website, so changing the site's code is out of the question.

If it's enough for you to stop at the load event of the page (normally some code gets executed before that event), you can do the following:
Switch to the HTML panel and there to the Events side panel.
Scroll down to the section saying Other listeners for Window
Right-click the function under the 'load' event (might be one with an arrow besides it) and choose Set Breakpoint from the context menu.
Note: There might be a 'DOMContentLoaded' event handler, which is called before the 'load' event. So, if that exists, set the breakpoint at that function.
Reload the page.
Here's a screenshot of that menu:
As mentioned above, normally some code is already executed before the 'load' event is fired, like libraries getting loaded or some global variables being initialized. Though as far as I know, there is no option in Firebug (or other browser developer tools) to stop the script execution at the very first executed JavaScript statement.
But it's normally still quite easy to set a breakpoint at that line. It just requires some manual searching:
Inside the Script panel select the first script called Inline from the Script Location Menu (the third toolbar button from the left).
Search for the first JavaScript line, or, if there is no inline JavaScript, select the script within the first <script> element from the Script Location Menu.
Set a breakpoint at the first line of the script.
Reload the page.

Related

Finding out which Javascript methods are never called

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.

Google Developer Tools for javascript modification doesn't work for long 'js' file

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.

iPad safari bookmarklet - why does it require 2 taps?

I have a bookmarklet like this:
javascript:(function()%7Bvar%20x=document.createElement('SCRIPT');x.type='text/javascript';x.src='http://tmxhost.com/mail/clippad.js?'+(new%20Date().getTime()/100000);document.getElementsByTagName('head')%5B0%5D.appendChild(x);%7D)();
But when I tap it nothing happens until I tap it a second time, then it writes the DOM. Anyone know why?
The bookmarklet appends this script to page: http://tmxhost.com/mail/clippad.js
That script has two parts. 1.) Add jQuery to page. 2.) Use jQuery.
The problem is that there is no check that jQuery has loaded before the second part is run, so usually the second part will fail on the first try.
When you click the bookmarklet the 2nd time, jQuery has finished loading, so the second part runs as expected.
There are some good tools and tutorials for using jQuery in a bookmarklet: https://www.google.com/search?q=jquery+bookmarklet
Another point to consider is that using $(document).ready is generally pointless in a bookmarklet because a bookmarklet is almost always used after the document is ready.

How to debug DOM manipulation by jQuery?

I'm working on an website with some dynamic jQuery content.
If the user pushed a button ("show menu") on the page, an javascript function runs. Let this function call loadMenu().
The loadMenu() function loads a menu (web conent) from server using ajax. Part of this loaded code is javascript/jquery. 2 functions of this code make some elements on the page draggable, 2 other functions make some elements on the webpage droppable. These functions are all started at $.ready-Time (if the DOM is ready).
All this works fine.
Now i added an "MenuAlwaysVisible" feature. This means: if the web-page is loading and finished (ready) the user doesn't need to press the button "show menu", because the javascript loadMenu() now fires automatically, if the page is ready
The problem now is, it looks like, the draggable handler are attached and worked as defined, but droppable does not work.
I'm not sure, but probably the droppable function runs on a time, where the DOM elements doesn't like to be droppable? Ore maybe some other jQuery codes overrides this? (but there are no other droppable elements on the page)?
So the question is: how to analyze that problem: how to debug DOM manipulation, using Windows and Firefox/Firebug or Safari, Chrome .. whatever...
Thank you!
One debugging trick I have found endlessly useful for dealing with JQuery is the insert obvious code trick. Slap in a .hide() command on some obvious, identifiable part of the page, and see if the code ever runs. Lets you track which code pieces are not behaving as intended, and which are simply never being used in the first place.
To answer my own question: i did not found any alternatives way than using firebug and console.info() or console.warn() to debug the code.
Thanks # all for the comments

Making Firebug break inside dynamically loaded javascript

I'm looking for a way to debug a dynamically loaded jQuery document.ready function.
Obviously I can't just bring up the script panel and add a breakpoint with the mouse since the function does not exist there.
I've also tried adding "debugger;" to the function (without the quotes), but that did not do anything. I have ensured that the function is actually executed while I tried this.
Thanks for your help,
Adrian
Edit: I just noticed that Firebug actually breaks on debug. However, when it does so on a dynamically loaded script, it does not bring up the source code of that script as usual. Plus, the call stack ends right below my own code. I can bring up the implementation for document.ready via the call stack, but that does not really help. Is this a Firebug bug or have I missed something?
I just worked on this similar question. The solution involves adding the word debugger twice; once at the top of the external file and one more time at the top of the function that needs to be debugged.
I noticed that if the debugger word was used only once, it did not work. Example:
//myExternal.js
debugger;
function myExternalFunction(){
debugger;
/* do something here */
}
You might try placing a break point where the event is called, and then instead of click "Play", choose "Step Into" (F11). I don't have a test case in front of me, but I think this may work.
I don't know if you ever got this figured out, but in case someone else needs it...
I got around this by moving the code I wanted to debug to an external file that was linked from the main page.
In my case, I had default.aspx loading services.aspx into a content div using jQuery AJAX. Services.aspx in turn, was loading jQuery UI tab elements using AJAX from a webservice that was providing it data. The webservice code was in a file called data.js which was linked from default.aspx. I needed to debug the code that was in the header of services.aspx (that loaded the tabs with data), but couldn't ever see it in any of the available inspectors. I just moved the code I needed to a new function in data.js and called it from the header in services.aspx.
I hope that makes sense to someone who needs it!
Just encountered same behavior (Firebug ignoring debugger; statement in dynamically loaded code) in Firefox 5.0/Firebug 1.7.3.
Worked around by detaching Firebug window ("Open Firebug in New Window").
There's also a 'debugger' keyword that's supported by the IE JScript debugger, and Safari's Web Inspector, so i would be surprised ifit wasn't supported in firebug.
Basically:
// mydynamicallyloadedfile.js
... // do stuff
debugger; // triggers debugger
... // more stuff
And i would expect firebug to break at the debugger keyword

Categories