Browser debugging tricks

During debugging you might pepper your code with lines like these:

console.log('foo = ' + foo + ', bar = ' + bar)

I recommend to use [variable interpolation](https://makandracards.com/makandra/30113-the-developer-console-can-do-more-than...

As the web is being used for more and more tasks, expectations rise. Not only should web pages offer rich interaction, they must be responsive in both size and interaction.

This imposes a paradoxon that needs to be solved by building performing a...

The linked article shows what current browsers do when you click a link like this:

<a href="tel:1-562-867-5309">1-562-867-5309</a>

Spoiler: The current state is sad

It's...

The linked site lists a wealth of CSS hacks that let you apply styles to just that one browser. You should be using this mostly for fixing browser issues and not give up on creating solid styles.

Spreewald includes a few useful steps for debugging a Capybara session.

Then show me the page # => Opens the page in the browser
Then debugger # => Open a debugging session

Option 1: JSON dump

In config/webpack/environment.js you can get inspect environment which includes all webpack config options set for the current environment:

const { environment } = require('@rails/webpacker')
const webpack = require...

The following Sass will do it:

hr
  color: #ddd
  background-color: #ddd
  border: none
  height: 1px

Smashing Magazine lists some handy tricks for print style sheets, all with CSS:

• Expand External Links For Print
• Print QR Codes For Easy URL References
• Use CSS filters to improve the result of printed graphics (i.e. images with transparent p...