javascript - How to test a script in multiple sites just by using chrome dev-tools? -


first of i'm not quite sure place kind of question, if not please tell me , i'll remove it.

i'm developing script modifies dom bit , i'd test in real sites see if behaves correctly , detect issues.

i wondering how simulate script @ page , if possible using chrome dev-tools.

at first tried adding script script doesn't execute.

i tried writing on console didn't work:

var script1 = document.createelement("script"); var script2 = document.createelement("script"); var head = document.queryselector("head"); var text = 'myscript();'; script2[(script2.innertext===undefined?"textcontent":"innertext")] = text;  script1.setattribute("src", "http://mysite.myscript.js"); head.appendchild(script1); script1.onload = function(){ head.appendchild(script2) }; 

edit: script worked in inside listening domcontentload event, of course when executed console, dom loaded.

this can done using devtools. make easy in many places, should take advantage of feature called snippets.

this code used test in snippet. changed "mysite" url pull copy of material design lite's js , set text log componenthandler object. other these changes, code:

var script1 = document.createelement("script");  var script2 = document.createelement("script");  var head = document.queryselector("head");  var text = 'console.log(componenthandler);';  script2[(script2.innertext===undefined?"textcontent":"innertext")] = text;    script1.setattribute("src", "https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js");  head.appendchild(script1);  script1.onload = function(){ head.appendchild(script2) };

with need following steps:

  1. open sources panel
  2. go "snippets" resources tab in left hand panel (green arrow.)
  3. right click in resource views (blue) , select "new snippet"
  4. name snippet, in case used "test" name. make sure understand is.
  5. fill in content editor script.
  6. once content saved, right click on script in resources listing. select "run snippet"
  7. check console (red outline, drawer or may go console panel itself) see output.

snippet usage

to verify further working, can go check elements panel.

injected data


Comments

Popular posts from this blog

toolbar - How to add link to user registration inside toobar in admin joomla 3 custom component -

linux - disk space limitation when creating war file -