KB Article K18568
Visible to All Users

How to enable script debugging

Description:
Sometimes the JavaScript code does not work properly, and you do not know what exactly happens with your code.
What should I do to display JavaScript exceptions in my browser?

Answer:

Edge

  1. Execute Developer Tools by pressing the F12 key on your keyboard.
  2. The Developer Tools window will be displayed;
  3. By default all exceptions are ignored and they're just logged to the Console tool. To change this behavior, switch to the Debugger window and select "Break an all exceptions";
  4. Perform the steps to reproduce the issue again;
  5. The Debugger window will be displayed;
  6. Analyze your code. Make a screenshot like the one shown above and send it to us.

Internet Explorer

Check whether the Developer Toolbar is installed on your machine. If you are using IE8+, this tool is already integrated in your browser. Otherwise, you need to install it manually. If the Developer Tool is installed, perform the following steps:

  1. Enable script debugging options via the Control Panel -> Internet Options -> Advanced Tab -> Browsing section. Disable both Disable script debugging options and press the OK button.

  2. Perform the steps to reproduce the issue again;

  3. The Webpage Error window should be displayed;

  4. Go through the Webpage Error window by clicking the Yes button;

  5. The Developer Tools window will be displayed;

  6. Click the Call stack tab and analyze your code;

  7. Make a screenshot like the one shown below and send it to us.

Firefox

Developer Tools are used for this purpose.

  1. Execute Developer Tools by pressing the F12 key on your keyboard. Alternatively, click the Menu -> Web Developer -> Toogle Tools menu as shown below.
    img1.png
    img2.png
  2. The Developer Tools window will be displayed;
    img3.png
  3. Switch to the console window by clicking the Console tab;
    img4.png
  4. Perform the steps to reproduce the issue again;
  5. The JavaScript exception will be displayed in the console;
    img5.png
  6. Click the exception to see the code where error occurred;
    img6.png
  7. Add a break point to the required code line and perform the same steps to reproduce the issue. Click the Call stack tab and analyze your code. Make a screenshot like the one shown below and send it to us.
    img7.png

Chrome

Use Developer Tools to accomplish this task.

  1. Execute Developer Tools by pressing the F12 key on your keyboard. Alternatively, click the Menu -> Tools -> Developer tools menu as shown below.


2. The Developer Tools window will be displayed;

3. Switch to the console window by clicking the Console tab;

4. Perform the steps to reproduce the issue again;
5. The JavaScript exception will be displayed in the console;

6. Click the exception to see the callstack;

7. Make a screenshot of the callstack to send it to us;

8. Click a link that is highlighted below to see in which part of the script error occurred;

9. Analyze your code. Make a screenshot like the one shown below and send it to us.

Opera

Use the Opera Dragonfly tool.

  1. Execute the Opera Dragonfly tool by pressing the Ctrl+Shift+I key combination on your keyboard. Alternatively, click the Menu -> Page -> Developer Tools -> Opera Dragonfly menu as shown below.
  2. The Opera Dragonfly tool window will be displayed;
  3. Switch to the script window by clicking the Scripts tab, then click the Show parse errors and break on exceptions button;
  4. Perform the steps to reproduce the issue again to see in which part of code the error occurs;
  5. Make a screenshot like the one shown above and send it to us.

Safari

  1. Click the Safari settings -> Preferences… menu as shown below.
  2. In the Settings window click the Advanced tab and enable the Show Develop menu in menu bar option as shown below.
  3. Close the Settings window and click the Menu for current page -> Develop -> Show Web Inspector menu.

    The remaining steps are the same as for Google Chrome.

See also:
How to use F12 Developer Tool to Debug your Webpages
Using the F12 Developer Tools to Debug JavaScript Errors
Enabling firebug
Chrome Developer tools
Opera Dragonfly

Show previous comments (4)
DevExpress Support Team 5 years ago

    Hi James,

    You are right. We updated the article.

      DevExpress Support Team 4 years ago

        Hello Jay,

        Thank you for bringing this to our attention. We removed the broken link and added the Using the F12 Developer Tools to Debug JavaScript Errors link.

        Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

        Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.