Debugging

Since templates are not written in standard programming language, they often lack the context visibility. However, with Edge, we give you enough tooling to inspect and debug templates. By the end of this guide, you will know:

  • How to inspect objects and the state of the template.
  • How to use Chrome DevTools for debugging the template output.

Accurate stack traces

The first step to better debugging experience is to provide accurate stack traces. Edge does a pretty good job in pointing to the correct filename and the line number of the error.

Following are the screenshots demonstrating compile time and runtime errors.

Compile time errors

Runtime errors

The stack traces works fine with components, partials and layouts too.

Inspecting Objects

Edge also provides a helper inspect to inspect values within your templates. The helper is similar to JSON.stringify, but also pretty prints the output for better readability.

You can inspect an object as shown below.

{{ inspect({ username: 'virk', age: 28, isAdmin: true }) }}

You can also inspect the state of a template as shown in the following example.

{{ inspect(state) }}

Using Debugger

Finally, you can also dig into the compiled output by using the @debugger tag. For debugging to work, you will have to use Google Chrome and its DevTools.

For demonstration, lets create a new template and paste following contents inside it.

View
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>{{ title }}</title>
</head>
<body>
  @debugger  @if(user.username)
    <h2> Hello {{ user.username }} </h2>
  @endif
</body>
</html>
Route
Route.on('/').render('welcome', {
  title: 'Home page',
  user: {
    username: 'virk',
  }
})

Now, start the HTTP server by running node ace serve --watch command, but also pass --node-args="--inspect" flag to it.

node ace serve --watch --node-args="--inspect"

# Debugger listening on ws://127.0.0.1:9229/7f98f05a-6d74-4d2a-9aa6-b69fda272a90
# For help, see: https://nodejs.org/en/docs/inspector
# [1587053678353] INFO  (hello-world/72154 on MacBook-Pro-9.local): started server on 0.0.0.0:3333

Finally, visit http://localhost:3333 inside Google Chrome and debug as shown in the following video.