I had the incredible honor and privilege to speek at WordCamp Atlanta last week.
I gave a presentation on Testing & Troubleshooting WordPress Plugins & Themes, which is the culmination of all that I have learned from leading quality at 8BIT for the past three years.
I am posting my enture presentation along with bullet point cliff notes and resource links for each slide.
- I live from Des Moines, IA.
- I am a frontend developer for John Deere.
- My website is manovotny.com.
- You can follow me on Twitter at @manovotny.
- I have been working for 8BIT for three years.
- I oversee quality for 8BIT, which means I test the integrity of our products before they are released.
- Most theme, and especially plugin issues, can be mitigated by properly using jQuery.
- Do not add your own version of jQuery.
- Do not deregister the version of jQuery that comes with WordPress.
- To use jQuery, properly enqueue the version of jQuery that comes with WordPress.
- While jQuery is the most popular example, there are actually several included scripts that come with WordPress, so be sure and properly queue those versions instead of using your own.
- Use WordPress conditionals to only display scripts on pages when they are needed. This reduces the changes of scripts conflicting with each other.
- I created WP Test to help identify issues while developing WordPress themes and plugins.
- It is a fantastically exhaustive set of test data to measure the integrity of your plugins and themes.
- It contains lessons learned from over three years of theme and plugin support, and baffling corner cases, to create a potent cocktail of simulated, quirky user content.
- In your development environments, tell WordPress to start logging and reporting errors so you can address them.
- Find your wp-config.php file, which should be at the root of your WordPress installation. Just replace the existing
define( 'WP_DEBUG', false );with the code below.
- Debug Bar is a debugging menu added to the admin bar that quickly shows query, cache, and other helpful debugging information.
- A very useful way to view the errors being logged and reported.
- Notice the “Debug” button in the WordPress admin bar turns red when there is a error or warning.
- Click it to open the Debug Bar panel.
- Notice the message it’s reporting so you can fix them.
There are many Debug Bar extensions that can provide a deeper view into what is happening.
- Debug Bar Actions and Filters Addon
- Debug Bar Console
- Debug Bar Cron
- Debug Bar Post Meta
- Debug Bar Query Tracer
- Debug Bar Super Globals
- Debug Bar Template Trace
- Debug Bar Transients
- Debug Bar-Extender
- Kint Debugger
- WooCommerce Debug Bar
- Log Deprecated Notices is a plugin that helps you identify old WordPress API functions your theme or plugin is currently using so you can update to the newer methods.
- Log Deprecated Notices logs its calls under the Tools menu in the WordPress admin.
- Sometimes themes or plugins will want to keep these deprecated calls anyway, especially if they want to support older versions of WordPress, so you will need to make that call on your own when reported.
- Note that it is a best practice to keep up-to-date with the newer methods instead of keeping legacy support whenever possible.
- Theme-Check is a simple and easy way to test your theme for all the latest WordPress standards and practices.
- It is located under the Appearance menu in the WordPress admin.
- Sometimes Theme-Check reports false positives, so you will need to determine if something is a legitimate claim that needs to be fixed or not.
- Theme Mentor is the cousin of Theme-Check plugin.
- It does deeper code analysis to ensure best practices, like checking for the dequeueing of jQuery as we discussed above.
- RTL Tester is essential for troubleshooting for plugins and themes that offer support for right-to-left reading languages.
- Slim Jetpack is simply Jetpack without the need to connect to a WordPress.com account.
- Handy for development environments who do not need the connection to WordPress.com to test Jetpack features.
- Someone in the Q&A session mentioned that Jetpack does now ship with a “Developer Mode” which you can enable to not require the connection to WordPress.com while in development environments. Simply add the code below to
wp-config.phpto enable developer mode.
- At some point in your development career, you will be bit by browser cache.
- We use a process of elimination procedure at 8BIT to determine where to begin looking for a point of failure.
- If things are not working, we first disable all plugins to see if that resolves the issue. If things start working again, then we enable plugins one by one until the issue reappears. Then we know we’ve found our culprit and we can begin troubleshooting the plugin.
- If plugins are not the issue, then we try switching to one of the default WordPress themes like TwentyEleven or TwentyTwelve. If the issue goes away, then we know it’s a theme problem we need to resolve.
- If both plugins and themes are not causing the issue, then you know you have an issue with WordPress core or a server configuration issue.
- Chrome Developer Tools is the most advanced way to inspect what is going on underneath the covers of your website.
- The Firebug extension / add-on is a good alternative for other browsers, though it is not as capable as Chrome Developer Tools.
- You can open Chrome Developer Tools by right-clicking anywhere on the website and select
- This will open a panel at the bottom of your browser (I have moved mine to the right).
Elementstab contains markup and CSS for the current page.
- In this panel you can select an element. In the screenshot I have selected the
<div class="container"></div>element. This also highlights that element on the web page itself in a light blue overlay as seen in the top navigation of the website.
- The far right of the screenshot also shows the CSS being applied to the element, the selector that is causing the CSS to be applied, as well as the order the CSS styles were loaded in. These CSS properties an values are editable, so you can make live changes to your website and see what it looks like without even refreshing your browser.
- You can open files by clicking the little file browser icon above the line numbers or by pressing
Control + Ror
⌘Rwhile in the tab.
- The content of these files can be edited live and the changes will take place immediately without needing to refresh the page. This is a great way to quickly troubleshoot.
- You can also set breakpoints by clicking on a line number. The next time the page is loaded, it will stop there and you can inspect variable values to see what is going wrong.
Consoletab is a essentially a full on Terminal or Command Prompt.
- There can be false positives, like loading a YouTube video. These errors can just be ignored.
- Viewport Resizer is a handy bookmarklet that will load your site in a viewport the size of common devices. This is helpful in testing responsive design.
- It is one of the few plugins that accurately display websites that are not built to be fully responsive, yet you want to still see what it looks like on a mobile device.
- Someone in the Q&A session also recommended the Web Developer extension as an alternative that properly displays websites with the correct user agents.
- Note that you can select different devices from the Viewport Resizer Toolbar in the upper left corner of the browser window.
- BrowserStack is a paid service that will give you access to testing your website on all browsers, devices, and operating systems.
- It also comes with built-in debugging tools.
- Someone in the Q&A session also mentioned that if you have a Mac, you can pair Xcode’s iPhone / iPad simulator to Safari’s Web Inspecter to debug. You can also plugin your iPhone / iPad via USB and use Safari 6 to live debug webpages on your iDevice with Web Inspecter. This Webdesigntuts+ article will walk you through that process.
- An example of a website in IE 8 running on a Windows 7 machine all from within my browser.
- The websites are fully interactive not just a screenshots.
And thanks to everyone who attended my talk and to everyone who came to WordCamp Atlanta. It was great to meet you all face-to-face and the conversations we had are priceless.
Please let me know if you have any additional questions about my talk or these notes. I would love to help answer them for you.
I am also making all the slides available in a single PDF, which you can download below.
Below is the video recording of the session, if you would like to watch it “live” instead.