0

I'm learning web design, and there is no better method than redoing others work. So I'm reading other pages code, but it's so hard to find the jQuery, Javascript or modernizer or ... code responsible for the effect.

I'm using firebug, also used firequery, but the problem is they give me the event but not the code and a big tree of DOM, I don't know where even I look into it.

I really don't care which event is triggered, but I do care how the code is written. If I find the code so I can understand the event is on click or on focus...

Or let's say a website has a some javascript file, linked to a website. when I load the webpage i get a webpage consist of DOM and external/internal script. When I see a cool effect and want to read the code, I run firebug, inspect element to find the element. After that I don't know what to do? I can't search for selector or event in the script because maybe the developer of the site used different selector that I'm searching. Sometimes I find the code, but it's so jammed, not in human readable form, I don't know how to change the code to something indent and neat

The problem becomes more dramatic when the website using other java framework than jQuery.

I've searched a lot, used many tools, but couldn't find anything useful, please with your advice light my way to learn web developing

edit:-- I found a way but I'm sure there should be a better way outside first in chrome I inspect the element to find the corresponding element, then i right click and check all the break point on it(if it doesn't work i do the same for parent element)

enter image description here

after that i play with that element to trigger the function and it break

enter image description here

usually the function that called the method is down in the callstack

also for reading also for reading the script i use pretty print of chrome, i used some online prettyfier but most of them has limitation in number of character, for a long script none of the google first page resault is good enough. so the only good option here is for now is chrome, anyone have any other method?

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Mohammad Hossein Amri
  • 1,842
  • 2
  • 23
  • 43
  • I don't know in firebug, but in chrome console, you can go to sources, ctr+shift+f and try to find the code by finding the selector. For example, you can search the id of the button that triggered the event. – Cristi Pufu Oct 14 '13 at 08:01
  • 1
    as i mentioned my problem is to find the selector. in a very complex page the selectors that i'm looking for is totally different than the selector of the developer. as a proof look at [link](http://www.imoney.my/credit-card) the name of selector generated by a for loop. 3 different framework. for filtering used at least 10 different selector.... (except ajax part) i want to learn tricks used in this website or similar complex one – Mohammad Hossein Amri Oct 14 '13 at 08:55

1 Answers1

0

It is difficult to learn how to do things just from inspecting it, as many effects may be implemented entirely in JavaScript, which may be deep, hidden away in a source file.

You mention that the code is not in human readable form, beautifying it may help: https://stackoverflow.com/a/6318092/1061602

Most 'visual' effects should be able to be viewable from the CSS, e.g. JQuery Mobile's buttons, it is possible to see how the different classes are combined, ui-shadow, ui-btn, ui-disabled etc

Otherwise, searching for selectors is pretty much all you can do. Personally, if I am learning, looking at too much code at one time can be overwhelming. Also a lot of the UI effects may be difficult to trace.

My advice is, perhaps a better way around it would be to try and describe one single effect that you require, and then search on Google or Stack Overflow for guidance on how to create that effect.

The usual documentation sources will be useful:

http://www.w3schools.com/css3/default.asp

http://api.jquery.com/

Happy learning!

Community
  • 1
  • 1
Adam Marshall
  • 3,010
  • 9
  • 42
  • 80