How to debug JavaScript?

Q: Is it possible to debug JavaScript on a web page using QtWeb portable browser?

A: QtWeb lightweight browser allows you to debug JavaScript functions, check code variables, analyze JavaScript error messages and warnings using built-in Web Inspector. Below are the steps to prepare environment and debug JavaScript.

Preparation steps for JavaScript debugging

• Make sure that JavaScript is enabled in QtWeb Internet Browser. Go to Settings, Privacy tab, and verify "Enable JavaScript" checkbox
• Make sure that Web Inspector is enabled. Choose menu Tools > Enable Web Inspector, or press Ctrl+E to turn it on (in case if it was not enabled previously)
• Navigate a web page you want to debug JavaScript for
• Invoke a Web inspector: either from Tools menu, or press Ctrl+I, or click toolbar button, or from the web page context menu
• Go to "Scripts" tab at the top of Web Inspector's window, and click "Enable Debugging" button. Web page source code is displayed
• Make sure that web page name you want to debug is displayed at the top of the source code window. If you have several web pages opened, you can navigate between them using arrow buttons at the left side of web page name, or to choose a web page from the drop down list
• Inspect a web page content: find JavaScript functions you want to debug and local variables you want to inspect

Note that when you turned on a debugging mode, QtWeb browser runs a bit slower and consumes more memory. It is recommended to turn off a debug mode and disable Web Inspector when you finished with debugging.

 How to debug JavaScript functions

To debug a JavaScript function, you need to invoke it first, and stop JavaScript's execution inside a function's body. This is how it can be achieved:

• Set a breakpoint at the beginning of function's body by clicking the line number at the left side. Blue marker should appear around the line number if the breakpoint set up properly.
• Invoke a function in one of the following ways:
  1. perform a specific action which causes function's launch, for example click the button on a web form which is linked to the function
  2. if the function is not linked to a particular web element, it is possible that it is linked to a web page body (global script), in this case just reload the web page (press F5)
  3. invoke function manually from the JavaScript console by typing its name and arguments (if any). Read below how to work with JavaScript Console
• Check the red marker and blue line at the place of the breakpoint, it means that you successfully entered the JavaScript function
• To resume script's execution, click "Pause/Resume script execution" - the left button at the top-right area of Web Inspector window, below "Search Scripts" field
• To make a simple step executing the current JavaScript's line, or step over the function call (at the point where execution stopped), click "Step over next function call" button at the top-right area of Web Inspector window, below "Search Scripts" field
• To step into the function at the point where execution is stopped, click "Step into next function call" button at the top-right area of Web Inspector window, below "Search Scripts" field. This only works when execution stopped at the line where  JavaScript procedure/function is invoked, otherwise this command is identical to "Step Over" command above
• To step out of the current function, i.e. to go to the parent's function on the stack (which invoked function where execution is currently stopped), click "Step out of current function" - right button at the top-right area of Web Inspector window, below "Search Scripts" field
• To see  functions call stack at the place of current program execution, inspect "Call Stack" area at the top right corner. It displays a function name, module name and code line where exection has been stopped. By clicking the function name you can position Web Inspector to the particular place on the stack.
• To see code errors, or debugger messages and warnings, open and inspect JavaScript Console by clicking the related button at bottom of Web Inspector window.

You can set up more breakpoints (even if execution is already being stopped), and continue to drill down through JavaScript functions.

How to inspect JavaScript variables

• Set up a breakpoint and stop function execution at the place where you want to inspect variables. Read "How to debug JavaScript functions" above
• Check "Scope Variables" panel:
  - "Local" area displays all local variables inside the function where execution being stopped in form: "Name: Value"
  - "Global" area displays all global variables in Document Object Model (DOM)
• If variable you want to inspect is an object, or complex variable, drill down through its structure by clicking the triangle at the left of the variable name, and inspect the variable members.
• Another approach to inspect a variable at the point of code execution is to type the variable name manually in the JavaScript console. Read below how to work with JavaScript Console

Continue steping Into/Over/Out of the functions and inspecting the variables in other places of JavaScript code.

How to use JavaScript Console

JavaScript Console helps you to inspect variables, to read warnings and errors, to execute JavaScript functions using a command line.

• Click the "Show Console" button at bottom of Web Inspector to open a JavaScript Console panel
• Click the empty line in Console panel to move a typing focus to JavaScript Console
• Type a variable name and press Enter to display the variable value in the Console, in the line below
• Type a function name followed by parentheses () and arguments (if any) inside and press Enter to invoke a JavaScript function with/without arguments. Function execution result you can check either as an output in the Console, or as changing browser's behavior (depending on function's code)

If code being executed produces errors or warnings, all supplementary/debug information is displayed in the JavaScript Console window.

Back to KB