Christian Heilmann

Using browser developer tools as an image browser

August 9th, 2022

Sometimes you come across web sites that have a lot of images scattered all over the page and you don’t care much about the content, but only want the images. You can use the browser developer tools as a media browser. Load the page you want to get the images from (here is a demo […]

Cheat codes for the web – Browser developer tools for non-developers

August 8th, 2022

Every browser these days comes with built-in developer tools that help people create, test and fix products for the web. You can right-click any website and select `Inspect` to get to them, press `F12` or `CMD + Shift + I on Mac` or `Ctrl + Shift + I` on Windows/Linux. These tools are for developers, […]

Rethinking Device Emulation in browsers

July 20th, 2022

Device Emulation in developer tools is great, but it doesn’t deliver to all users of it and could be much better. Please help us improve it. When developer tools of browsers came out with Device Emulation and reponsive design tooling , everything changed. As a developer, you didn’t need to resize the browser window any […]

The browser console has a count method

July 14th, 2022

When debugging or analysing JavaScript, you often see people trying to find out how often a certain function is called. The common way to do that is to use a global counter variable to increment and log in the function. var i = 0; function test(){ // other functionality i++; console.log(i); // other functionality }var […]

TIL: Visual Studio Code does markdown autocompletion for in-page links

July 5th, 2022

When you write markdown files, headings automatically also get an ID generated so they become in-page targets to link to. This is also used to create a table of contents in various publishing systems. Today I learned that VS Code also offers these generated IDs as an autocomplete when you type links. If you wrap […]