4 Handy Features of a Browser Console

Abdullah A Malik — Tue, 03 Nov 2020 23:41:24 +0000

Although console.log() is by far the most used console function in the development tools of all modern web browsers. There is more to it.

Console Output

The browser console has four different output functions. You can use different functions to distinguish the type of generated output.

console.log(‘simple log message’)
console.info(‘info: important information’)
console.warn(‘warning: something might go wrong’)
console.error(‘error: something went wrong’)

Console Style

A lot of messages in the browser console can be overwhelming sometimes and you might lose track of the message you are looking for. Console styles help you style your output messages so you can distinguish them easily.

You can use the %c directive to apply CSS styles.

console.log("Styles help you distinguish %c between different texts", "color: orange; background-color:green;");

Console Grouping

Console groups are a good way to group identical console messages together. It increases the console messages' readability. You can group different types of console messages together.

console.log("outside group");
console.group("Group starts");
console.log("first group message");
console.log("second group message");
console.warn("group warning");
console.error("group error");
console.groupEnd();
console.log("outside group again");

Console Timers

Console timers are helpful when debugging your code and you want to check how long does your code takes to run.

console.time("timer”);
console.timeLog("timer”);
// Do your stuff here.
console.timeEnd("timer”);

Publish a landing page on Github pages in 5 minutes!

Abdullah A Malik — Sat, 31 Oct 2020 00:17:38 +0000

Github pages make it super simple to publish your static webpages quickly. You need to follow the following steps which will not take more than 5 minutes and your webpage will be published live.

Create a new repository on #Github. Keep the default settings. Give it a name i.e 'landing-page'.
git clone https://github.com{your_user_name}/landing-page on your local machine.
Add your landing page files.
Stage your files git add .
Commit your files git commit -m "first commit".
Create a new branch called gh-pages git checkout -b gh-pages
Push your changes to #Github git push origin gh-pages