debugging - Javascript: How to single-step site initialization? -


short background: i'm pretty new javascript , interested in customizing third-party websites needs — i.e. write scripts greasemonkey , like. sites bloated libraries jquery, bootstrap, etc. makes harder figure out how work.

when analyze new website , want know code gets executed, can use firebug create breakpoints or watchpoints , single-step through code. however, not work code runs while/when website first loads. how can single-step through part? i'm looking way set breakpoint point before first javascript code executed.

if there better tools firebug i'm open suggestions. please keep in mind not control website, changing site's code out of question.

if it's enough stop @ load event of page (normally code gets executed before event), can following:

  1. switch html panel , there events side panel.
  2. scroll down section saying other listeners window

  3. right-click function under 'load' event (might 1 arrow besides it) , choose set breakpoint context menu.

    note: there might 'domcontentloaded' event handler, called before 'load' event. so, if exists, set breakpoint @ function.

  4. reload page.

here's screenshot of menu: setting breakpoint @ 'load' event

as mentioned above, code executed before 'load' event fired, libraries getting loaded or global variables being initialized. though far know, there no option in firebug (or other browser developer tools) stop script execution @ first executed javascript statement. it's still quite easy set breakpoint @ line. requires manual searching:

  1. inside script panel select first script called inline script location menu (the third toolbar button left).
  2. search first javascript line, or, if there no inline javascript, select script within first <script> element script location menu.
  3. set breakpoint @ first line of script.
  4. reload page.

-

Comments

Post a Comment

Popular posts from this blog

unity3d - Rotate an object to face an opposite direction -

i have object , b. when click on object b, rotates object b (a faces b). b doesn't face a. need following : when faces b, need face opposite direction. have code rotating @ b. how rotate face opposite direction after that? vector3 targetdirection = target - transform.position; float step = speed * time.deltatime; vector3 newdirection = vector3.rotatetowards (turretdome.transform.forward, targetdirection, step, 0.0f); turretdome.transform.rotation = quaternion.lookrotation (newdirection); you object facing object b, want inverse direction of object after that? objecta.transform.rotation = quaternion.inverse(objecta.transform.rotation) but lets assume example turretdome object a, (negate direction): turretdome.transform.rotation = quaternion.lookrotation (-newdirection); naturally, both of these snippets not show how smoothen rotation, seem know how use time.deltatime. just incase unsure, quaternion.lerp this
Read more

angular - Is it possible to get native element for formControl? -

i've got angular2 reactive form . created formcontrol s , assigned input fields by [formcontrol]=... . understand creates nativeelement <-> formcontrol link. my question: possible nativeelement formcontrol ? wanna myformcontrol.nativeelement.focus() i can share 1 terrible solution works me. in reactive forms can use either 1) formcontroldirective ts mycontrol = new formcontrol('') template <input type="text" [formcontrol]="mycontrol"> or 2) formcontrolname ts myform: formgroup; constructor(private fb: formbuilder) {} ngoninit() { this.myform = this.fb.group({ foo: '' }); } template <form [formgroup]="myform"> <input type="text" formcontrolname="foo"> </form> so these directives write patch like 1) formcontroldirective const originformcontrolngonchanges = formcontroldirective.prototype.ngonchanges; formcontroldirective.proto
Read more

javascript - Why jQuery Select box change event is now working? -

i working on product filters user select select box according his/her preference not getting selected value user in jquery. html code:- <select name="product_filter" id="product_filter"> <option value="price_low_first">price : low high</option> <option value="price_high_first">price : high low</option> <option value="latest">latest</option> <option value="popular">most popular</option> </select> jquery code: $(function () { $("#product_filter").change(function () { alert("hi") var selectedtext = $(this).find("option:selected").text(); var selectedvalue = $(this).val(); alert("selected text: " + selectedtext + " value: " + selectedvalue); }); }); hi believe code perfect. once please check jquery.min.js
Read more