Developer Console Examples

Learn JS

Try typing the following into the console or use copy/paste.

1 + "1"
0 == ""
0 === ""
obj = { firstname: 'John', lastname: 'Doe', age: 22 };
JSON.stringify(obj, null, 2);

Test Restful API

Try typing the following into the console or use copy/paste. Look at network tab of Developer tools for more details on the request and response.

$.getJSON("student/2.json");
$.ajax({url: "student/2.json", type: "GET"});
$.ajax({url: "student/2.json", type: "POST", data: {firstname: "Joe", lastname: "Doe" } });

Learn DOM and events

Try typing the following into the console or use copy/paste.


//Right-click on blue box and select "Inspect element"
//Go back to developer console and enter $0
//We can interact with elements selected on Elements tab in Console using $0, 1
//Change the color of the box
$0.style.backgroundColor = "green";
//We can see how mouse move events work over the box and where we are scolled in the page
$($0).on("mousemove", function (evt) { console.log('pageX ' + evt.pageX + ' pageY ' + evt.pageY); });
//So, you can see pageX and pageY are based upon 0,0 being the top-left of the unscrolled page.
//If you put the mouse over the box and then use the wheel on the mouse you'll notice the event doesn't trigger even though you are over a different part of the box, let's try and find that event
$("body").on("scroll", function () { console.log("scroll body"); });
$(window).on("scroll", function () { console.log("scroll window"); });

Try out a library

Select2.js is already in the same folder as this HTML file, but hasn't be added to this page. Let's add it to the page and style this drop-down.

`


s = document.createElement("script");
s.src = "select2.js";
document.body.appendChild(s);
l = document.createElement("link");
l.rel = "stylesheet";
l.href = "select2.css";
document.head.appendChild(l);
//Use this
$($0).select2();
//Or
$("#testSelect").select2();