CODEWITHSUNDEEP
javascriptgoogle-chromedebugginggoogle-chrome-devtools
Binary
Binary

Reputation: 501

Chrome dev tools's "show more" shows incorrect size

I have a really simple script that creates a large string

window.big = '';
for(let c = 0; c < 12000; c++){
    window.big += 'L'
}

Things get weird when I try to console.log it.

window.big.length is 12000, however, when I try to do console.log(window.big) in Chrome Dev Tools, it says Show more (23.4 KB), more than double the original size, which was 12000.

String.length may be different compared to the byte size of the characters, however, things get interesting when you try to do

var blob = new Blob([window.big], {type: 'application/octet-stream'});
window.open(window.URL.createObjectURL(blob));

which showed a size of 12KB

Replicated the issue on Chrome OS, Chrome Version 80.0.3987.162 (Official Build) (64-bit)

Picture of chrome dev tools issue Picture of downloaded file size

Upvotes: 0

Views: 491

Answers (1)

woxxom
woxxom

Reputation: 73616

Chrome devtools has always shown the size of the internal string which is stored in UTF-16 encoding per JavaScript specification so each character occupies two bytes. When you create a Blob it stores strings as UTF-8 where ASCII characters (such as L) occupy only one byte.

It was fixed in Chrome 83 (see crbug.com/1024721). Now Chrome counts byte size of a string using UTF-8 encoding as it's prevalent in the web so now devtools shows 12 kB for your test.

Upvotes: 1

Related Questions