Five Ways to Troubleshoot SCA in the Browser

For a while now, web browsers have included a number of tools to aid developers who are working on websites. As a developer you'll be aware of what they are but below below are some tips for using your browser's tools to deal with problems that may arise when working on an SCA site. Where browser-specific terms are used, they refer to Chrome (but similar tools will be available in other browsers).

Blank Screen on HTTPS Page When Using Local Server

This is probably an issue you'll notice when you first start developing or if you've just opened your local server in a new tab/window. As you're viewing a secure page but loading scripts through a unsecure protocol (e.g., http://localhost:7777/javascript/...), your browser will block them unless you add an exception. In Chrome, this can be overridden by clicking the silver shield in the address bar and then Load unsafe scripts.

This may not always result in a blank page, but you may notice "Mixed Content" errors if a script has been blocked.

Check Whether a SuiteScript Service is Being Called

When you're trying to connect the frontend of your site with the backend, you may experience difficulties in getting / creating / updating / deleting data on the server. You can use your browser's Network tab to view all network operations, such as the getting of files.

If you filter for XHR (XMLHttpRequest requests) after performing your CRUD operation, you'll see a small selection of requests that have been made to the server. You should see the name of the service being used, the appropriate method and the correct status. Following that you can dive deeper by examining the Preview or Response, which will show the payload of the operation (such as JSON data of a GET).

Find What Template To Edit

If you want to make an aesthetic change to your site or close in on a bug in a template, you may find it difficult to find the right template to edit. The first place to start is to inspect the page that you want to change. Then, go through the DOM elements until you find a comment that begins "TEMPLATE STARTS". This will have the name of the template being rendered by a view.

Note, however, that the template may use other templates within it if, for example, the main template shows a list and another template is used to show each item in that list. To do this, Backbone uses a child view as part of a collection view. A key characteristic to look out for is the use of the data-view parameter on elements within the template; these are used to load in additional templates from the collection. Once you have that name you can look in the view that calls the template and then look at the childViews function. With that name you can reference the view and, in that, the template that's being used.

Find What Sass File to Edit

Have you ever inspected an element on your site and wondered where the styling for it was coming from? Using Sass, separate .scss files are combined into one and this can make identifying from where styles originate difficult. The Gulp local server has a flag that enables source maps when you run it. Instead of running gulp local, run gulp local --sass=sourcemap.

Your local server will start as normal and then, in your browser, enable CSS source maps. When you refresh the page and inspect an element, it will no longer show the combined CSS file. For example, if I have a module in the My Account application then it will normally be combined into myaccount.css. However, with source maps enabled the originating Sass file is shown instead; thus, in the browser I may see that the styling from my button comes from _artist-details.scss instead. Not only that, but it will show the pre-compiled Sass as if it were being used to style the site.

Quick Browser Checks

There are a small number of things you can do in your browser to quickly check if the problem is your browser or the code, which apply to web development in general:

  • Hard reload / empty cache – forces the browser to download any resources that it may have stored during previous visits to the site.
  • 404s – using the console, you can see when a GET has failed. While the log may be 'noisy' with warnings (e.g., from mixed content) you can filter by clicking Errors to only show serious issues, such as 404s.
  • Remember that if you're not sure if you're function is firing, you can put a console.log('Hi!') or the like in it and see if it prints in the console.

There are a whole host of developer tools available that you can use troubleshoot problems in the browser – check, for example, devtoolsecrets.com.

Do you have any browser tricks for debugging SCA sites? Post them below in the comments.