Advance Use of Dev Tools
Check if you think some styles are cascading from JS unnoticed :
Open DevTools on this page, click the JS word in selection mode then you will see this in the markup, click on three dots, go to break on then select attribute modification. This will make the execution to pause then click on the text again a window will pop up which indicates the modifications it has.
With %c We can style inside console.log()
Copy and paste this on the console :
console.log('%c This is a styled text', 'font-size: 20px; color:
crimson; background-color:purple');
Console Variants
console.warn('Something is missing');
console.error('Something went wrong');
console.info('This is an unknown issue!')
console.assert(p.classList.contains('dark-bg'), 'If false returns
this quote and for true nothing logs'); console.clear();
console.dir(); logs a comprehensive detail of the element, if is has
classes, datasets etc.
console.groupCollapsed(from Obj) here more logs are grouped with
collapsible handler. console.groupEnd(from Obj)
console.count('same') // same: 1
console.count('same')
console.count('same') // same: 3
console.time('starts and ends with same text')
fetch(...)...
console.timeEnd('starts and ends with same text');
console.table(an array) to show an array as a table.
Setting Log Point
You don't need to write log here and there in the code, go to dev tool => Sources, right click on a number then Add logpoint, now it logs on every time without having any manual log inside coding interface. Furthermore, we can even add conditional breakpoint to reveal unnoticed sneaky bugs.
Check your usages of all files
In the devTool click on three dots open More tools then click on Coverage, refresh the window to see the unused bytes of files attached to the current page.
Inspecting an opened popup window
Run command on devTool or press ctrl+shift+p to open it, type 'Rendering' then scroll below and check the Emulate a focused page. Now a popup window wont disappear on click.
You can emulate media features such as prefers-color-scheme, contrast, vision deficiencies and much more to explore.
CSS Overview
One of the best feature of More tools, It gives a full overview of the CSS declarations in sections including the unused declarations.
Add your own snippets
Open the Sources tab then open the Snippets, make a snippet here to use it anytime from any page.