Often, I’ll be trying to debug a popup, menu or timed animation- by hovering over the popup, then opening the dev tools, and then trying to look at the generated code in the Elements tab. But as soon as I move my cursor, the code disappears!

A cursor hovers over the menu. Two extra lines of code appear in the code viewer, but disappear when the mouse moves away.
Notice the two elements appear on hover, but disappear when the mouse moves away! How frustrating!

The quick fix?

  1. Open Chrome Dev Tools (Cmd + Option + I)
  2. Open the Console tab
  3. Paste the following, the hit enter:
    setTimeout(function(){debugger;}, 5000)
  4. Navigate to your popup and wait- in 5 seconds, the debugger will pause the page, and you can see your code!

Enjoy your debugging! 🐛

I’ve been brushing up on my ruby learning using the Exercism.io exercises. What I don’t love about the process, is continually having to jump back into Terminal to run the test suite. Instead, I implemented a simple Guardfile on the source directory, to continually monitor all the subdirectories.

Files

(Put these in your Exercism track root directory, ie. ~/exercism/ruby/

Installing

  1. Change directory to your Exercism track folder ie:cd ~/exercism/ruby/
  2. Install guard, etc with bundle install

Running

bundle exec guard

*Edited 2nd June, 2019 to add colour support.

Mitch Winkel-Davis

Test Analyst, iOS Developer, Youth Worker & Coffee Lover. www.mitchwd.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store