Debuging with firebug or google chrome - javascript

I need to debug my javascript using firebug or google chrome but my javascript is in the same file with the html, when I try to find my javascript code I dont know where is it becase it is not in a specific file it is in the same file with my html, if I use the firebug or google chrome debuger I find the script tab but then I dont know in what file is my javascript because it is not in a javascript file , how can I to find my javascript to debug?
The problem is because I am using ASP.MVC and I have only one view and many partial views that I put in the view, the view has a lateral menu when someone click on the option in the lateral menu one partial view is loaded next to the lateral menu, so this partial view has html and javascript but this new javascript in the partial view is not found for me in firebug or google chrome devtools because only is showed the firs html and script to the view and the code of partial view is not showed in these tools because this code was inserted dinamically and the firebug not refresh it.
What can be the solution?
Thanks.

You can know error in which line .look here
you can see file name and number of line error and when you click in name of file you will get
error line.

Go to the URL. For example, this page, I can put a break point in the file "debuging-with-firebug-or-google-chrome". I believe Google Chrome works similarly.
Also, they're sorted by domain, so that should help you find the URL's file.

Firefox build-in debugger (Main menu button > Developer > Debugger, or CTRL+SHIFT+S) lists all files that contains loaded scripts in left sidebar 'Sources'. It contains even html files if they contain <script> tag with content inside. You can check it out at stackoverflow.com.
The picture shows debugger with loaded html file.
Sometimes a file may be not present in the list because there were an error during loading of the script. Check "Console" tab to see any javascript errors. Similar feature (reporting errors to Console) also provide both Firebug and Chrome devtools.
Edit:
There is a bug / misleading behavior in both Firefox and Chrome. In order to see all scripts (especially those deferredly loaded) it is necessary to open debugger window before the page starts loading. Deferred scripts are shown only if the debugger is open by the time scripts are loaded.

Related

Javascript redirecting on everypage can't remove

I have a javascript file that was accidentally added to the admin side of our site. The javascript is below,
<script>
if (document.getElementById("errorTitle") != null && document.getElementById("errorTitle").innerHTML === "Insufficient Privileges") {
window.location.replace("/portal/InsufficientPrivileges");
} else {
window.location.replace("/portal/FileNotFound");
}
</script>
The problem is that this code runs on the admin pages so we are unable to remove it. If we disable javascript on the browser the page never renders, dynamic content. How can we disable this from running so we can upload the proper file?
You might be able to edit the page that contains the reference to the problem file. If you can just edit the page to jump over where that code is called with an if statement or goto.
If you can't edit the other pages then you can Use the debugger to change the code executed on the fly. Chrome and Firefox have debuggers that should be able to do this.
Specifically for Chrome you go into the object inspector (available via menus or right clicking on the page). Then you can see the HTML on the left window. You select the script tag of interest, you can right click and select delete or select "Edit HTML"
If the page redirects you before you're even able to edit anything, you can use automated tools.
Fiddler (Windows)
Fiddler lets you see all pages downloaded, and then you can have it send your browser a different page when it tries downloading any page you specify (AutoResponder feature). This way you can temporarily edit a page while you can fix it in the admin panel.
Greasemonkey (Firefox) or Tampermonkey (Chrome)
These plugins let you run JavaScript code on a page as soon as it gets to your browser. This will let you do things such as removing the script tag programmatically.

Best way to debug from Google Chrome console the .js file if it is loaded and executed AFTER button is clicked

Let's say the page http://www.example.com is opened in my browser. I click on the button button1 on that page that triggers
$('.popup').load(popupContentURL);
to be executed.
The new content is displayed in the popup. Everything is perfect.
The question is: the page popupContentURL has such a code inside:
<script type="text/javascript" src="jspopup.js"></script>
As result, when you click on the button button1, the javascript code from jspopup.js is being loaded and executed.
My question is: is there any way to debug jspopup.js from the Chrome console?
I wish to start debugging from the very first line.
The problem is that when I'm on the http://www.example.com and on the way to click the "button1" button, I can NOT set up a breakpoint inside the jspopup.js as it is not loaded yet.
All that files are not local. They are located at http://www.example.com .
Yes you can very well do that . The Chrome DevTools include a number of useful tools to help make debugging JavaScript less painful. Check here
In Chrome you can use the debugger; statement within your loaded code.
If you have the Chrome F12 developer console open it will break at that line so you can debug from that point onwards.
Lots of other useful tips here: https://developer.chrome.com/devtools/docs/javascript-debugging

Can a Page Source include JavaScript contents?

Is there a way to view whole content of javascript file in a normal page source?
My javascipt file consists of many links which i want to be visible when i do a normal page source? can anyone please suggest a way how i could achieve it?
Well, for one, you can just embed the script in the page.
Instead of <script src="abc.js"></script>, do:
<script>
//Full contents of abc.js here
</script>
I don't see why you'd want to do that, though. Most developer tools are sufficiently advanced that you get a list of included scripts to inspect on the side (for example, the "sources" tab in the Chrome dev tools)

Extension .js files don't show up in Chrome debugger

When I right click on the icon for my extension-in-development and click Inspect Popup (or when I click the icon and choose "Inspect Element") and look under the "Sources" tab, my .js file is nowhere to be seen - only a long list of inspect-able files like apitest, devtools, json_schema, etc. I can, however, find the code through the Elements tab by following the link in the .html file, but that doesn't bring to anywhere where I can actual debugging.
I've also loaded the "Hello, world" extension that Google's tutorial provides, and when I Inspect that one, its .js file is right there. I can't imagine what I've done differently from the tutorial example to cause this.
It's Chrome version 22.0.1229.94 run in a Linux VM. If there's any more information I should be providing, please let me know.
Type location.reload(true) in the console.
http://developer.chrome.com/extensions/tut_debugging.html
If I understand your question right,
Under the sources tab, there are two more tabs, one says Sources and the other says Content scripts. You need to click on the content scripts tab, and there you will find what you are looking for.
Okay So I figured it out, simply click on you extension icon, and a little dialog will pop up, then right click on it and click on inspect element. You can figure it out from there I reckon. (My other answer would be good if it was a content script, but this is a popup script.)

How is this jQuery plugin loading data? Can't tell from Firebug

I'm working with this jQuery plugin, and watching it save and load data using Firebug (beware, the author has chosen to demo it with pics of scantily-clad women, possibly NSFW): http://www.bennadel.com/resources/projects/jquery_photo_tagger/demo/
I want to work out how the page is loading tags. I'm confused, because the plugin specifies URLs for saving and loading data (save_Tag.cfm and load_tags.cfm). Indeed, when I save a tag, I can 'see' the data being sent off to save_Tag.cfm in Firebug.
However, when I reload the page, Firebug shows the response from load_tags.cfm as empty - yet the tag is still loaded.
See the actual plugin code for more details.
Please could anyone explain how the page is loading tags, and also, how I can see this data using either Firebug or Chrome Developer Tools?
Thanks very much!
Check the firebug "Net" tab. Sometimes the requests doesn't appear in the console, and in these cases you can use the "Net" tab (the last one from the tab selector).
In Chrome or safari you can also use the "Network" tab. Here select the option "XHR" to see the Ajax requests.
When I inspect the initial load in Firebug I get this response:
[{"ID":"11033514-FFAE-1669-D1E0F669C6480F74","PHOTOID":"photo3","Y":179.0,"WIDTH":1.0,"HEIGHT":1.0,"MESSAGE":"blah","X":290.0}]

Categories