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)
Related
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.
Is a chrome extension able to display different iframes, though through of which one is able to select different iframes in a menu bar inside the chrome extension?
I’d appreciate any helenter image description herep ! :)
If so, how can it be done ? Do I need to use JavaScript or is it done in the html file fullly? I’d very much appreciate an example :)
Yes but no, the content scripts will NOT execute in the iframes loaded dynamically via JavaScript in the page, only the html i think.
reference: https://stackoverflow.com/a/8917679/4674037
an iFrame is the separate web page with a separate URL.
You can not get iFrame content, but you can integrate your chrome extension directly into iFrame through URL in the manifest file. In this way, your extension will work with iFrame content as usual.
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.
I am dynamically adding the content of "div" in jquery it is added in DOM. but in view page source i can't see dynamic content of an element
<div id="pdf"></div>
("#btn").click(function(){
$("#pdf").html("ffff");
});
how can i get updated page source after made dynamic changes. it is added in DOM but page source doesn't have the content ? why ?
Thanks,
Siva
The page source is the page source - a raw text file which cannot be changed. It is hosted on the server and it's obvious you can't made any changes to it. Once you visit a web page, your browser queries to read that text file and then it parses it to the DOM. When you do any javascript/jQuery magic like adding new html elements, you do it on the DOM.
that's just normal behavior, the source is allways the original source of the page and it doesn't show changes made after page load. If you want to check the source after changes use a tool like firebug or chrome developer tools.
EDIT:
As Johannes H stated you no longer require firebug since major browsers all include developer tools.
If you use Firefox you can get the "web developer" plugin, then view "generated source". This will show the jQuery added div.
When You are viewing the page source the javascript will not run, so the dynamic elements will not be added.
To get the sources you can use your browser developer tools:
click f12
choose the top element and press copy as html.
I just saw something odd, I'm using Google Chrome browser and I right clicked a tab with GMAIL open and selected to view the source. All I had returned was :
<!DOCTYPE html><html><head></head><body><div></div></body></html>
How would they have managed to do this ? I didn't think was possible ??
Because gmail is built with javascript it will also build the page dynamically after it is loaded with javascript.
gmail also uses a lot of iframes, you can have a look at the conent of those by inspecting them with Firebug for Firefox
I don't think it is possible. Did you use Tools -> View Source in the menu? It shows a lot with me. Maybe you clicked in an iframe?
depends where you click ... (you clicked in an iframe which is empty, and content is loaded with javascript from other frames...)
If you go to the options -> tools -> view source you will see the main frame and its code..