How can we detect errors in WordPress code?

by 1 replies
1
Hey!

I use WordPress on some of my sites. Sometimes, things don't work properly.

Usually, it's a plugin that's causing the issue.

I know I can deactivate all plugins and reactivate them one by one to see which one causes the issue, but that's not enough.

I need to be able to see exactly what the problem is.

Is there a way to do this?

I suppose I can need to visit the problematic page with Firefox and open the Developer Web Console. Is there a list of "main" types of errors I can look for?

Mind you, I'm not a programmer.

Thanks in advance for your help!
#programming #code #detect #errors #wordpress
  • I've done a HUGE amount of WordPress debugging - in fact, I could probably write a book about it! If you go to the page having trouble and open up Dev Tools (or whatever it's called in FireFox, I don't recall since I've switch to Chrome), make sure that you're looking at the console, just like you said.

    The #1 Most Common Error That I Encounter

    Code:
    $ is not a function
    or sometimes, you will see this as
    Code:
    Uncaught TypeError: $ is not a function
    This usually has one cause. Someone wrote some javascript using the jQuery framework, but they forgot to make it play nice with WordPress.

    Quick Explanation
    Below is an example of jQuery script that works fine in most circumstances. Here's a JS Bin demo of it working - JS Bin - Collaborative JavaScript Debugging
    Code:
    <script>
  $(document).ready(function() {
    alert('Hi, I am an annoying javascript popup! After you close me, I am going to attempt to insert some text into the body of your document.');
    $('body').append('<p>Here is some inserted text. Randy Savage was my hero!</p>');
  });
</script>
    But, if we use the version of jQuery that comes pre-loaded with WordPress, this same code will cause an error and won't work. Here's a demo of the error that you'll get (you can use your browser's dev tools console OR I've loaded the generic JS Bin console)... JS Bin - Collaborative JavaScript Debugging

    This is because WordPress is bundled with a noConflict version of jQuery. Basically, this means that all dollar signs ( $ ), need to instead be the word jQuery. This is because a lot of other javascript libraries (jQuery is not the only one) also use the dollar sign. So, to avoid script conflicts, WordPress decided to do things this way. So, here's a simple fix to show you what the above code should be when used with WordPress...


    Demo - JS Bin - Collaborative JavaScript Debugging
    Here we just replace $ with jQuery. You would do this with every $ in your script.
    Code:
    <script>
  jQuery(document).ready(function() {
    alert('Hi, I am an annoying javascript popup! After you close me, I am going to attempt to insert some text into the body of your document.');
    jQuery('body').append('<p>Here is some inserted text. Randy Savage was my hero!</p>');
  });
</script>

    This can also be caused by a plugin or theme developer forcing WordPress to NOT used the version of jQuery that is bundled with it and forcing it to use jQuery from Google's CDN. This is a bad practice, and I've been fighting the good fight against it for years. Check out this link to a comment I made on an article back in 2012 - https://css-tricks.com/snippets/word...comment-238127


    Other Common Errors

    Code:
    Mixed Content: The page at 'https://xyz.com' was loaded over HTTPS, but requested an insecure stylesheet 'http://abc.com/cdn/style.css'. The request has been blocked; the content must be served over HTTPS
    This means that the site you are looking at is loaded through a secure connection (starts with https://) but they are trying to use a resource that is loaded through an insecure connection (starts with http://).

    Usually, the fix is to just go into the code and change stuff like to but that is assuming that abc.com has the ability to use HTTPS. If it doesn't, then you can just save the stylesheet locally and serve it from your own server.

    BTW, the same error happens with scripts loaded from outside locations. The fix is the same as well.


    Code:
    $ is not defined
    Code:
    jQuery is not defined
    This usually means that something is trying to run jQuery functions before jQuery itself has loaded. On a page, you need to have your link to jQuery come before any javascript that uses jQuery functions or you will get this error.

    So, if you see that there are tags in the that are using jQuery functions like or but jQuery itself is not loaded until the bottom of the page, you will likely see this error.

    This error can also pop up if there are multiple versions of jQuery loaded onto the same page. This can happen pretty easily. For instance, the WordPress theme may use the version of jQuery that is bundled with WordPress. Then, a crappily written plugin might load Google's CDN version of jQuery without telling WordPress not to use it's own version. Then, you would have both versions loaded on the page and they may conflict with each other.

    I would say, do yourself a favor and start using Google Chrome. Learn about how to use the built in dev tools here - https://developers.google.com/web/to...evtools/?hl=en and make a habit out of visiting Stack Overflow to search for answers to your questions.

    -Noah
    • [ 1 ] Thanks
Join the discussion

Next Topics on Trending Feed