How to look at the Javascript that a page is using?

Question

Are you able to see the coding of a Javascript function on a webpage your viewing? Is there a way using Google Chrome DevTools for example?

Specifically, I want to figure out how to code something like this !Example 1

from this page http://www.indeed.com/cmp/Bruce-Productions/jobs/Graphic-Designer-0a8d9cff06bf2790

Thanks in advance for any help!

Solution 1

Yes there is a way to look at all of a webpages html, Javascript files, and CSS using Chrome. Open up the page in chrome, right click on the page and select inspect element (or press ctrl+shift+I). From there you can navigate the different elements on the the page and the structure of the HTML file. To get at the Javascript and CSS files switch over to the sources tab and look through the folders on the left to find the file you are looking for.

A word of warning, depending on the site the code that they are using may be minified (most all of the white space removed, and lots of variable names and other things shortened) or other wise very difficult to read. If you are looking to do something more specific then I would recommend searching of that or posting a question regarding that problem.

Solution 2

In the browser you do right click to open a menu and select "View Source Code". Then you can read or save that page to analyze the content for any image or script.

But your question is so generic maybe you should try something basic and try to builds thing from there. Otherwise make a more specific question of what you want to do.

Solution 3

If you want to view the Javascript code, you can right-click the page, then select Inspect, then navigate to the javascript line by highlighting or selecting that line with .js extension and then position your pointer in the .js file, right-click & select Reveal in Sources panel.

Comments

[Aviel Fedida]

Basically you should separate your image into multiple parts(the form, facebook like button, images, etc), each part is considered a world of it's on(specific code, markup, stylesheet, etc), you may need a server side background, when you say figure out it's kind of hard to know.., is it the facebook button?, is it the form style, server side code to support that form, etc...

[Yogi]

This link might help: jQuery Dialog Form