[Devtools] Edit any text on page

Hiền Vương — Mon, 20 Feb 2017 15:00:00 +0000

Wanna test UI on your page when changing your text?
Wanna edit some text directly in the browser itself?

Now with designMode you can use your browser as a text editor.

Go to console and type:

document.designMode = 'on'

to turn it on. Valid values are 'on' and 'off', default is 'off' in almost browsers.

You can now edit almost anything and everything in the DOM.

Happy Debugging!

Originally posted on my blog here

Fun with Console object

Hiền Vương — Tue, 07 Feb 2017 13:35:38 +0000

The Console object provides access to the browser's debugging console (e.g., the Web Console in Firefox). The specifics of how it works vary from browser to browser, but there is a de facto set of features that are typically provided.
Console - Web API at MDN

Below is a list of some features that you might not know about the Console object:

1.Clear the console

Use console.clear() to simply clear your output.

2.Styling output

You can use "%c" directive to apply css style for the ouput

   console.log('%c Make console greate again!', 'font-size:50px; background:red;')

3.Display tabular data

Use console.table(object) to display the provided object as a table.

Let's try:

persons = [ { name: 'Hien Vuong', city: 'Ho Chi Minh' }, { name: 'Donald Trump', city: 'New York' }]

console.table(persons)

4.Grouping together

Use console.group(message) and console.groupEnd() to group all logs to a dropdown list.

Let's try with the above persons object

persons.forEach(p => {
    console.group(); 
    console.log(`This is ${p.name}`);
    console.log(`He comes from ${p.city}`);
    console.groupEnd();
});

Happy Coding!

Originally posted on my blog here

Hi, I'm Hiền Vương

Hiền Vương — Tue, 07 Feb 2017 07:20:16 +0000

DEV Community: Hiền Vương

[Devtools] Edit any text on page

Fun with Console object

Hi, I'm Hiền Vương