How To Access Your Browser’s Developer Tools for Debugging

When debugging CheckoutWC, you will sometimes be told to open the JavaScript Console or Developer Tools.

Here is a quick guide on how to access this console on the most modern browsers.

Google Chrome

1. Navigate to the desired page
2. Press CTRL+SHIFT+J (CMD+OPT+J on a Mac) or F12
3. A Developer Tools sub-window should appear, as in the screenshot below
4. In the Developer Tools window, click the ‘Console’ tab

Mozilla Firefox

1. Navigate to the desired page
2. Press F12
3. A Developer Tools sub-window should appear, as in the screenshot below
4. In the Developer Tools window, click the ‘Console’ tabAlternatively, press CTRL+SHIFT+J (CMD+OPT+J on a Mac) for a pop-out window containing the console

Edge

1. Navigate to the desired page
2. Press CTRL+SHIFT+J or F12
3. A Developer Tools sub-window should appear, as in the screenshot below
4. In the Developer Tools window, click the ‘Console’ tab
5. Reload the current page

Safari

1. Open Safari’s preferences, and open the Advanced pane
2. Enable the ‘Show Develop menu in menu bar’ setting, and close the preferences pane
3. Press CMD+OPT+C
4. A Developer Tools window should appear, as in the screenshot below
5. In the Developer Tools window, click the ‘Console’ tab