I'm debugging a Twitter Bootstrap dropdown menu (http://twitter.github.com/bootstrap/javascript.html) which isn't dropping down.
I'm assuming the Javascript isn't running but would like to check. My initial thought was to drop a breakpoint into bootstrap.js somewhere using Firebug. However, I can't see where to do this. If I click on the Script tab I just get a screen showing javascript.html which seems exactly the same as the HTML source code.
Any suggestions?
In the script tab, where you see 'javascript.html', click on it (click on javascript.html) and firebug will give you a popup list of all scripts the page is using. The one you want to debug will likely be found inside the assets folder there.
Related
I want to debug an issue in my JavaScript code. However I don't have access to the source at the moment, but I want to debug it in my browser now.
The JavaScript piece of code I want to debug is in a view, added later to the page (.NET Core .cshtml view).
I can see that in the Elements tab in my browser, but not in the Source, so I can add breakpoints.
Is there a way for me to "search" for that code in the Source tab or to add a breakpoint through the Elements tab in the browser?
I'm working on trying to find a defect in an angular application in the javascript being used to scroll a page. Person clicks link, page scrolls. Simple.
Alas, I have no idea what functions are actually being called when a user clicks the link and given this app consists of dozens and dozens (and dozens) of separate files, I'm having trouble finding what's going on.
I've read about using breakpoints and setting them up via the SOURCES tab in devtools. However, regardless of which of the many JS files I open in there, I never get any breakpoint options to check.
Is there a way to see what JS is getting fired with a particular event on the page within Chrome's Devtools?
Go to Sources tab.
Unfold Event Listener Breakpoints
Unfold Control, check scroll checkbox.
Scroll the page.
Javascript runtime will stop on event listener bound to page scroll and place will be showed in main window under Sources tab. If it's library file (in You case Angular files), right click on the file and Blackbox script. Scroll page again ;)
Lets say for example that I have a button and when I click on it a modal dialog opens on the screen, or I have a vertical navigation and when I click on an item, it shows all the sub-items of this one.
I was wondering if it's possible to preview on Firebug, which lines of code are executed and see the specific code of the JavaScript file?
What I'm looking for is a way of viewing the JS code that is executed in a similar way as Firebug does with CSS (by doing Inspect Element with Firebug on a tag and showing all CSS rules that are applied to this tag).
You can use the Script panel to view and debug your JavaScript code.
There are several ways of how you can debug your code:
Setting a breakpoint
Using the debugger keyword
Using the Break On ... feature
In all these cases the script execution will stop at a specific line, from which you can step through each instruction to debug the code.
How you do that is described in more detail on the Firebug wiki page.
you can debug (see) your js code.
In firebug Script panel is provided where you can select your js and attach debugger wherever you want.
Is there an application that allows me to select a section of a web page, and then outputs all js used there? I've been told I can do this with Chrome Inspector, but haven't had any success so far.
Example:
On this page - http://preview.oklerthemes.com/porto/2.7.0/page-left-sidebar.html - there is a tabbed box in the sidebar. I want to easily grab all the JS/CSS needed for that box. I usually use Inspector to look at all the styles, and go and grab theme from each CSS file, but I don't know how to do this for the JS.
It's not quite clear from your question what you're asking.
Are you trying to see what JS causes writes or changes to a particular part of a web page? The easiest way would be to open the page with the element inspector, right-click a particular chunk of HTML and stick a breakpoint on modifications.
The next time a function causes any changes, the breakpoint will trigger and you'll be able to crawl up the call stack to see what the cause was.
I made a very big mistake today, and accidentally deleted the entire CSS page for my website. I think I may be sick. I do have one page that uses the CSS open from before I deleted it. Is there I way I can get the css off of it? As soon as I refresh the page, it will be totally gone. The page I have open is in google chrome. I know I should have had it backed up.. all that stuff. But please, I might just start sobbing if I have to write the CSS all over again. Any help?
You can use a variant of the following code in the dev console:
var rc='';
for (var i = 0; i < document.styleSheets.length; ++i){
var ss = document.styleSheets[i];
rc += Array.prototype.map.call(ss.cssRules,function(el){return el.cssText}).join('') ;
}
rc should contain your CSS.
(Adapted from some code I use in an iOS app to capture CSS from an HTML page. The basic idea is to go through document.stylesheets, harvesting cssText from cssRules. See https://developer.mozilla.org/en-US/docs/Web/API/document.styleSheets.)
Unless you have a cached version, which should contain your css call, you wont be able to. You could try to right click and 'View Source', which would show you a link to your css file. If you click that link, it may give you a new window which will show you the text for your css.
Since the file no longer exists, it may not. Especially if you opened it locally.
If you had the Developer Tools open when you loaded the page, then this method should work for you. If you didn't have the dev tools open... then this may not work.
In the dev tools, go to the Network tab at the top of the dev tools window that opens. Next, locate your CSS file in the list of resources downloaded for the page. Click on it, and your file contents should show up in a pane to the right of that (you may need to click the Preview or Response sub-tabs on that pane to see it). You can highlight and copy/paste from here.
If you didn't have the dev tools open, the catch that makes this not work is that the Network tab is not necessarily, in my experience, populated with any resources.
An alternative is to search Chrome's temporary cache. I'm pretty sure the file name would be unmodified, so you could try executing a file search from the top level of Chrome's cache in the filesystem and see if it comes up.