Conditional Breakpoints in Chrome Dev Tools

I recently attended WordCamp London 2016. It was a true blast and an absolute success and really deserves its own blog post, maybe I’ll get round to writing one soon. There is a small thing I need to share sooner though, as it’s been a HUGE help to me in my dev life.

Now I’m a big fan of the developer tools available in Chrome (other browsers are available) and I knew about the ability to set breakpoints in the JavaScript that can be seen in the Sources tab. What I didn’t know though was that you could set conditions against the breakpoint, so that execution would only be paused when the conditions were met. I think it can quickly be seen how this can be incredibly useful when you’re keen on digging into particular flow of events and data through your code.

To add conditions to breakpoints the process is straightforward. Simply right click on the break point and you get the option to edit it. From here you can then add the conditions.

Screenshot of breakpoints in Chrome

Now when my code runs the breakpoint shall only be triggered once the conditions are met. In my case (see this Codepen) I wanted to only trigger my breakpoint when the el.name was the string “Flop”.

Screenshot of Triggered Conditional Breakpoint in Chrome Dev Tools

I learnt of this during an extremely enlightening talk by the wonderful, passionate Katie Fenn that covered loads of gems of information on how to make the most of the Chrome dev tools. Her slides can be found here.

The Easy Way to Add Widgets to WordPress Content

In my experience of building and maintaining WordPress web sites it is quite a common to want to put some related blocks of information into your main post’s or page’s content, inline. For example you might want to add a tag cloud or a list of related posts. This type of information is already available via WordPress widgets and of so you could add it to your sidebar (if you theme and template supported one). But what if you want to add the tag cloud into the middle of the post… like this;

[turbo_widget widget-prefix=tag_cloud&obj-class=WP_Widget_Tag_Cloud&widget-tag_cloud–title=My+Tag+Cloud&widget-tag_cloud–taxonomy=post_tag]

Wow, pretty cool eh?

So this is possible today using my 5* rated Widgets on Pages plugin. With the plugin installed you can create a new Widgets on Pages sidebar, add your Tag Cloud widget to it, copy the generated shortcode and then paste that into your content. But now it’s even easier…

Introducing Turbo Widgets

I’ve recently created a new plugin for WordPress, called Turbo Widgets. And with this, WordPress widgets can be added to posts and pages using the nice WYSIWYG editor… click, click, click, BOOM!

Turbo Widgets Demo

There’s a free version of the plugin available on the WordPress.org plugin repository that has this nice GUI for adding widgets and there’s also a premium version that supports the ability edit the widgets too, again using the TinyMCE WYSIWYG editor.

And Turbo Sidebars?

As well as this, the premium version also supports Turbo Sidebars. These are custom content areas that can hold standard WordPress content (text, images, etc) as well as widgets added through the Turbo Widgets features. These content areas can then also be added to posts and pages via shortcodes (soon through the WYSIWYG too) . You can also use template tags to add these Turbo Widgets to your themes templates, say for example adding related posts to the bottom of each blog page.

The documentation page for Turbo Widgets contains further info on how to use these, but I also hope to blog through their usage too in the near future.