JSFiddle - React, Tailwind, and code Playground

by staeff

HTML

<link href='http://fonts.googleapis.com/css?family=Merriweather|Droid+Sans+Mono&v1' rel='stylesheet' type='text/css'>

<h1>be a console power-user</h1>

<a href="http://www.youtube.com/watch?v=4mf_yNLlgic">
http://www.youtube.com/watch?v=4mf_yNLlgic
</a>

<ul>
<li>XHR
<li>console.time / timeEnd
<li>console.dir() / dir()
<li>$0 / inspect()
<li>$$
<li>monitorEvents()
<li>keys()/values()
<li>copy()
<li>super-cool Opera and Firebug features
<li><a href="//code.google.com/chrome/devtools" rel="prerender">more devtools</a>    
</ul>

    <p>Notes:<br/>
        &lt;jsfiddle&gt;/embedded/result/ vs. &lt;jsfiddle&gt;/show/<br/>
        A comment on the video suggests to use result, the show method might go away.

CSS

body { font-family: Merriweather; font-size: 18px }
textarea { width: 100%; height: 80px; font-family: Droid Sans Mono; }

JavaScript

function ajax(){
    
    console.time('ajax');
    var xhr = new XMLHttpRequest();
    xhr.open("get", "/?" + Math.random(), true);
    xhr.onload = function(evt){   
        txt = document.createElement('textarea');
        document.body.appendChild(txt);
        txt.value = evt.target.response;
        console.timeEnd('ajax');
        console.log(txt);
        console.dir(txt);
    };
    xhr.send(null);

}
    

addEventListener('click', ajax, false);