Retrieving a partial content

You can send a Range header:

request.setRequestHeader("Range", "bytes=0-9999");
request.send(null);

Note that the server might ignore this header and you will get the usual response back. In most cases the response will be "206 Partial Content" however with exactly 10000 bytes of data. Content-Rangeresponse header indicates which part of the file you've got, e.g.request.getResponseHeader("Content-Range") might give you bytes 0-9999/1234567 (here 1234567 is the total size of the file).

Obviously, you can also do request.setRequestHeader("Range", "bytes=100000-119999"); to get data from the middle of the file.

The following code can be used to download the first 10k of a sites html as per the first part of the question...

Lets say I only need first 10kb of the page

function getURL(url, limit, callback) {
    var request = new XMLHttpRequest();
    request.onreadystatechange = function() {
        if ( request.readyState == 4 ) {
            if (request.responseText!=0) callback( request.responseText, request.status );
        } else if (request.responseText.length >= limit) {
            // If limit is exceeded
            var result = request.responseText;
            request.abort(); // Cancel request
            callback( result, request.status );
        }
    };
    request.overrideMimeType("text/html");
    request.open( "GET", url, true );
    request.send();
}

getURL('http://www.google.com.au', 100000, debug);
//getURL('http://paez.kodingen.com/testy.png', 100000, debug);

function debug(responseText, status) {
    console.debug('length of responseText '+responseText.length);
    console.debug('responseStatus : '+status);
    console.debug('responseText :\n'+responseText);
}

Note
It should be noted that this wont get exactly the size you specify as their is no way to say how often the readystate will be called. Also, I force it to be text otherwise their may not be a responseText.

Here when readyState is not 4, which mean loading state; So here we can abort request when size is exceeded.

jQuery data() method

$('<some selector>').data()

will return you all the data section attached to element.

Modifying Console.log

Go in console mode ( Control Shift J on Windows ) , enter this :

console.nativeLog = console.log;

Then enter this

console.log = function( a, b ){ if(a=="extension") console.nativeLog( b ) }

The first line keeps the native implementation in a safe spot. The second line does pretty much what you request.

Awesome way to use this :)

jquery === $

the jquery === $ is used to check whether jquery uses $ as its replica

How to detect whether console is open

window.onresize = function(){
 if((window.outerHeight-window.innerHeight)>100)
   alert('hello');
}

Above code will fail when console is undocked and when the window sizes are manipulated and when page is loading.

You may also get false positives when working with certain frame setups.

The bottom line is that there is no documented way to reliably detect the inspector, and no way at all to detect it when undocked. This is most likely due to security concerns. A malicious webpage could conceal its payload when the inspector was open, making it more difficult to debug.

debugger;

debugger; is an amazing keyword for debugging

CSS Diff

As a proof of concept, we can do a small trick here and avoid creating extension. Chrome keeps elements you select via 'inspect element' button in variables. Last selected element in $0, one before that in $1 etc. Basing on this, I've created a small snippet that compares last two inspected elements:

(function(a,b){    
    var aComputed = getComputedStyle(a);
    var bComputed = getComputedStyle(b);

    console.log('------------------------------------------');
    console.log('You are comparing: ');
    console.log('A:', a);
    console.log('B:', b);
    console.log('------------------------------------------');

    for(var aname in aComputed) {
        var avalue = aComputed[aname];
        var bvalue = bComputed[aname];

        if( aname === 'length' || aname === 'cssText' || typeof avalue === "function" ) {
            continue;
        }

        if( avalue !== bvalue ) {
            console.warn('Attribute ' + aname + ' differs: ');
            console.log('A:', avalue);
            console.log('B:', bvalue);
        }
    }

    console.log('------------------------------------------');
})($0,$1);

How to use it?

Inspect two elements you want to compare, one after another, and paste the code above to console.

Result