When a build runs, its goal is to complete and produce all the files necessary for a new preview. But sometimes things go wrong, and the build fails. When that happens, CodePen Compiler returns Diagnostics to help show you what went wrong and where, whenever possible.

You’ll be able to see these build problems in lots of places:

  • The footer has a build status indicator
  • The Blocks panels will show which Blocks the build failed on
  • If possible, the file that caused the build error will be indicated in the Files panel as well as on the tab and at the exact line position if the file is open.
  • The preview area will display as much error information as possible.

You may also see warnings in a build. These are potential problems, but are not serious enough to stop the build themselves.

An example of an error Diagnostic is using the Sass Block and having a syntax problem in SCSS code which prevents it from being processed.

Hovering over the wavy underlined code in the code itself will display the diagnostic there, or you can double-click it to open it inline.

You can see the UI is demonstrating this build error in 5 places above.

  1. The file in the Files Panel has an error icon. This is to help you to see exactly which file(s) caused the problem and let you jump to it. The Files Panel isn’t always open though, so there are more places like…
  2. The footer status. This is there because it is almost always visible.
  3. The line(s) of code. This is perhaps the most useful place to see the Diagnostic, as it underlines the exact part of the code that caused the problem (when possible). But the file may not always be open or scrolled to the right place, so…
  4. The file itself. Positioned in the bottom corner, a file will show a Diagnostics button there to help you jump to the problem.
  5. The preview. Shown above, the errored build has a big modal overlap showing you the Diagnostics. This is a strong reminder the build didn’t succeed. Underneath it will be the last successful build, and you can close this to minimize it if you don’t care to see Diagnostics here.

Because the CodePen UI can be in so many different arrangements, there are even more places you might see Diagnostics, like:

  1. The Blocks & Build Panel, at the step the problem happened.
  2. Individual Block Tabs.