DevTips – Quickly Testing Public Scripts on a Customer’s Website

What would you do if one of your users contacts you and says your plugin is not working on her website? How would you tackle the issue?

Obviously, the appropriate answer is: “it depends.”

But regardless of the issue a user has, you should always follow the same approach:

1. Understand the problem
2. Ask them to explain how to reproduce the issue
3. Reproduce it locally
4. Understand what’s amiss
5. Try to fix it
6. Repeat steps 3 to 5 until fixed

Unfortunately, sometimes you aren’t able to reproduce it locally… and so you need access to your user’s website (ideally, a staging copy) to see the issue “live” and work on steps 4 to 6.

Well, what if I told you that sometimes you can work on a user’s website without their granting you access there? That’s what I’ll show you today.

Issues on Public JavaScript

If the issue a customer is experiencing affects only the front-end of their website and it’s JavaScript related, you don’t need access to their website to work out a solution. Instead, you can work on a fix locally and see if it works on their website. Here’s how.

Requirements

First of all, you obviously need a local development environment. Usually, this means you’ll have a local WordPress website with your plugin running on it. I personally use Lando for that, but feel free to use any other alternative (like Local, LAMP, or whatever works for you best 😉).

Second, you’ll need Request Interceptor. This is a browser extension (available for Firefox and Chrome) that “intercepts HTTP and HTTPS Requests” and, depending on how you set it up, allows you to “modify request/response headers, block/redirect requests, and modify query params.”

Nelio Forms

A fantastic contact plugin using the block editor. In its simplicity lies the true power of this plugin. I love it, very versatile and it worked perfectly for me.

Wajari Velasquez

WordPress.org

Free Download

Premium Version

Intercept Scripts and Use Local Alternatives

Long story short, all you gotta do is intercept your plugin scripts on the user’s website and replace them (using a redirection) with those on your local environment.

To do that, open the Request Interceptor’s settings screen and create a New Rule Group using the left sidebar. Then, add a New Rule that redirects the script on their website to a script on your development environment:

Once the rule is properly set up, all you gotta do is enable the rule itself (in the previous screenshot, it is), enable the Rule Group (it also is), and then enable the plugin (in the screenshot it isn’t, as it’s set to Off in the upper right corner), and that’s it! Whenever you’re visiting https://user-website.com, the script you’ll be using is that of your local environment! Pretty neat, huh?

Making Our Lives Even Easier…

Now, the aforementioned solution is great if you want to replace a single script on a specific user’s website. But it’s not as convenient as it could be, because you’ll have to your Request Interceptor‘s setup every time you get an issue from a different user, changing the URL of the website and what not.

To overcome this inconvenience, all you gotta do is change the request’s matching mode from StartsWith to Matches(RegEx). This way, you can replace the script on all websites with that of your local script:

Unfortunately, this solution is not correct and would result in an infinite redirection loop. That’s because, as you can see, the target URL (that is, the local development URL) also matches the regular expression… 😥

But that has an easy fix! 🤗

Just change the local URL to something different. Personally, I like the following:

1. Create a symbolic link from plugins to redirected-plugins
2. Tweak the URL in your Actions from /wp-content/plugins/… to /wp-content/plugins/redirected-plugins/…

so that you end up with something like this:

And that’s it! You have a simple setup to quickly replace the scripts on a user’s website with those on your development environment so that you can quickly iterate over changes, add logs, try out different solutions, etc.

I hope you liked it and, if you did, share it with your friends and stay tuned for more tips and tricks for developers!

Featured Image by sebastiaan stam on Unsplash.