We Keep Coding

How do I find the file that is pulling in a script in web inspector?

One specific example is I see multiple versions of jQuery on my website. How do I know what's pulling in jQuery? I don't see it in my source code, so it must be another integration that's pulling it in.
It's not just jQuery though. I'd also like to track down where additional scripts are coming from.
I looked in web inspector and see multiple iterations of jQuery being loaded. I then searched the source code of my site for "jquery" in an attempt to find the source with no results.

In Chrome, you can open the devtools with control-shift-i (Windows). Go to the Network tab. Reload the page. In the table that appears in the devtools, click "Type" to sort by the type of request - look for script. From there, you can look through the different scripts to see which one(s) are the ones you're looking for, and click on the "Initiator" for that row to see what initiated the request for that script.
For example, for Stack Overflow, you'll see something like:
And clicking on that row takes you to the location in the HTML where there's a script tag:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Open the network tab in the browser's dev tools, switch to the JS sub-tab, and look for requests for jQuery. Select one and look at the initiator column to see why it was requested.

Getting the contents of Chrome's console with JavaScript

First time poster. Currently trying to work on a project but I am having an issue with iframes. I'm making an extension for Chrome, and part of its functionality right now is to be fetching any shapes/borders on a page. Unfortunately, that also includes ones within iframes. I'm currently stuck because I cannot get around security policies from Cross-Domain sources.
I was wondering, however, if it is possible to create a function that displays what the Chrome console does when I hit "inspect element" on a page... I tried to make a console function called "save" that would automatically download a file of anything output to the log, but the output for the iframe's HTML is blank except for its tag...
When I am inspecting an element on the page, I can see the contents of that iframe just fine. Is there anyway to just get the actual text from Inspect Element and store that? I know this may be silly, but I genuinely have no idea. I am pretty new to JavaScript. I just need to match up script tags for shapes for part of the extension's functionality.
I'm assuming that this is going to end up being impossible, but I figured I'd ask. I'm also assuming that this inspect element functionality is something that only the browser can work with. But hey, maybe there's a way. Thanks for any help.

Take affect the change in Html or in the code

Info
When i make some change in my code in js file in my editor some time is not take affect in the chrome, i need to open in the view-source find it in the url and refresh to make the change.?
Question
Why is this happen and how i can avoid it.?
I need to save all in the editor and take affect everywhere .

Disable caching. Open the developer window find "network" and check "disable cache".
In Chrome F12 -> network -> disable cache

This issue happens because your browser tries cache js script each tume )

Debuging with firebug or google chrome

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.

extension using background, content and devtools together

I've been trying to figure this out from the docs and samples but there just isn't enough there yet (or maybe I'm missing something?).
I want to create a devtools panel but I still want access to the inspected window's dom like I get in content scripts. Right now my option is eval something in the context of the inspected window, but i would really rather not do that if I can avoid it. If I can just use a content script along with my devtools page/scripts that would be idea, but it doesn't seem to be working like I expect that it should - i can't seem to use the background page to send messages between my devtools page and my content script.
Also, is there a way to get those cool dom subtrees to display like they do in the elements panel or in the console along with the awesome hover/highlight feature?
UPDATE
So I can connect to the content script from the panel page by forwarding the tab id of the inspected window and pulling that out in my background page. So I have to do this
// devtools.js
chrome.extension.sendMessage({
'to': chrome.devtools.inspectedWindow.tabId,
'message': 'whatever'
});
and
//background.js
chrome.extension.onMessage.addListener(function(message,sender,callback) {
message.from = sender.tab.id;
chrome.tabs.sendMessage(message.to, message, callback);
});
And my content.js script gets the message just fine ... and i thought that the sender's tab id would work to send things back from the content script, but it doesn't. The background script gets the message but the devtools page never gets it back.
I'm having a bit of trouble figuring out how to properly debug devtools extensions as well. The content script can log to the page's console and the background script logs to the background page that you can inspect from the extensions page, but where does the devtools page log to?

The code I was originally testing works fine now with Chrome 26+ ... I think I was doing something that should have worked but didn't at the time that caused the behavior I was seeing.
#Konrad Dzwinel's comment was very helping on debugging devtools and noting that fact that this method actually should and does work. Thanks!

Just a quick update from 2016 (and Chrome 54+) for anybody who could also struggling debugging DevTools extension:
After adding custom DevTools pane successfully and showing Angular2 app in it, I found that the extension isn't connected to the page DevTools console and sources. Hitting on the page DevTools window F12 as suggested above doesn't work (have no idea if it's Chrome itself of some problems in my system), the page DevTools window is closed. But pressing Ctl+Alt+I on the page DevTools window opened one more DevTools window with the custom pane application sources and console attached.