Debugging functions

  • Resolved norricorp

    (@norricorp)


    2 years, 12 months ago

    So I saw this in stackoverflow about setting up a jquery function in wordpress.

    I have added the add_action code to functions.php in the my astra theme directory.

    I have created a new directory and added the jquery script there.

    On a page, I have added a few buttons as custom html, given them id’s and then added sone blocks of text as more custom html, given then id’s too and made the second block display:none style.

    When I run the page (having saved it), the second block does not display (good) but the script is not running when the buttons press.

    What would be the approach here to debugging javascript that is under wordpress?
    Logs? Browser developer tools? Other?

    regards,

    • This topic was modified 2 years, 12 months ago by norricorp.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator bcworkz

    (@bcworkz)

    Your browser’s “sources” developer tool has script debugging capability. TBH I’ve yet to make use of it. I’ve not had a project so complicated that it’d be worth it for me to learn how to use it. For my level of script debugging, console logging pertinent data has sufficed. In fact, the error messages alone that are automatically logged are often enough for me to determine what had gone wrong.

    Before getting into debugging, there are some basic things to check. Ensure that your script file (and the jQuery library) is actually referenced in the page’s source HTML. Verify that the link actually leads to your file. It’s easy to get the path wrong when enqueuing. If your jQuery uses the $ shortcut, your script needs to be wrapped in a “noConflict wrapper”, or replace all $ shortcuts with jQuery. If that all checks out, then it’s time to start debugging. Start by ensuring your click event callback is actually called by inserting an alert() or console.log() call first thing.

    Thread Starter norricorp

    (@norricorp)

    Thanks for this @bcworkz and it was very helpful.
    From the articles I had read, I simply used “jQuery” instead of “$” at the start of function but every $ had to be replaced. I did not use noConflict.
    I also added some console logs so that I could see if it was even being called.
    And it is and it works.

    Moderator bcworkz

    (@bcworkz)

    A small clarification. Right, you would not use noConflict yourself, but the jQuery library that ships with WP does run in noConflict mode. jQuery obtained from elsewhere like Google APIs wouldn’t typically use noConflict mode. Using 3rd party sources for jQuery in a WP environment is strongly discouraged.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Debugging functions’ is closed to new replies.

Tags