Accessing the JavaScript Console
Open Chrome DevTools with Command+Option+I (Mac) or Control+Shift+I (Windows/Linux), then select the Console tab. This is your starting point for inspecting global objects and variables in SCA.
Inspect the Global SC Variable
SCA uses a global SC variable that holds site data. Type SC in the console to view its objects, which include user-specific and page-specific data. For example:
- Site Settings: Access via SC.ENVIRONMENT.siteSettings. This is case-sensitive and reveals settings like currency or locale.
- Configuration: Check SC.CONFIGURATION to verify if backend changes are reaching the frontend. This helps diagnose caching issues or configuration mismatches.
Explore the Main View and Model
To inspect the current page’s rendering, access the main view (layout view) or its model:
- Main View:
- Newer sites: SC.Application(‘Shopping’).getLayout().getCurrentView()
- Older sites: SC._applications.Shopping._layoutInstance.currentView
- Substitute Shopping with the relevant application (e.g., Checkout or MyAccount).
- Verify the view type with: SC.Application(‘Shopping’).getLayout().getCurrentView() instanceof require(‘Facets.Browse.View’).
- Model Data:
- Newer sites: SC.Application(‘Shopping’).getLayout().getCurrentView().model
- Older sites: SC._applications.Shopping._layoutInstance.currentView.model.attributes
- Check for custom fields (e.g., on a product detail page, inspect item > attributes).
List Loaded Files
If you encounter errors like Uncaught Error: No MyCustomization.View, check loaded files with requirejs._defined. This lists all modules loaded by RequireJS, helping you confirm if a custom class is missing.
Inspect View Context
To debug template rendering issues, access the context object:
- Current view: SC._applications.Shopping._layoutInstance.currentView.getContext()
- Child view (older SCA): SC._applications.Shopping._layoutInstance.currentView.childViewInstances[‘Item.Price’].getContext()
- Child view (newer SCA): Use the specific path, e.g., SC._applications.Shopping._layoutInstance.currentView.childViewInstances[‘Product.Price’][‘Product.Price’].childViewInstance.getContext().
This reveals the data passed to templates, helping diagnose incorrect text or conditional logic.
Using the Network Tab
The Network tab logs all HTTP requests made while DevTools is open. Filter by XHR to inspect API calls (e.g., api/items or LiveOrder.Service.ss). Key sub-tabs include:
- Headers: Shows query string parameters (e.g., item IDs or search keywords).
- Preview: Displays formatted JSON responses, useful for verifying API data.
- Response: Raw response data for deeper inspection.
To troubleshoot search results, right-click an XHR request and select Open in new tab for a full view of the API response.
Performance Analysis
The Network tab’s waterfall view provides performance insights. Hover over a request to see timing details (e.g., Time to First Byte). Slow requests may indicate server or database issues. For detailed performance guidance, refer to SCA’s performance documentation.
Checking Site Metadata
SCA pages include metadata in the <body> tag’s comments, e.g.:
<!-- SuiteCommerce Advanced [ prodbundle_id "333161" ] [ version "2020.2.0" ] --> <!-- 775 s: 45% #173 cache: 1% #26 -->
This provides:
- Bundle and version details.
- Page generation time (e.g., 775ms for TTFB).
- Database and cache usage stats.
Common Issues and Fixes
Blank Page on Secure Local Pages
If a secure page (e.g., https://) loads scripts via http://localhost, Chrome blocks them, causing a blank page. Click the shield icon in the address bar and select Load unsafe scripts to bypass.
Content Not Updating After Reload
- Clear Browser Cache: In Chrome, open DevTools, click-and-hold the reload button, and select Empty Cache and Hard Reload.
- Check Server Cache: For NetSuite-hosted sites, submit a cache invalidation request.
- Inspect Console Errors: Look for JavaScript errors or failed resource loads.
Service Call Issues
If a service (e.g., CRUD operations) fails, filter the Network tab for XHR requests. Verify the service name, HTTP method, status, and response payload. Ensure the correct data is sent and received.
Finding the Right Template
To edit a template, inspect the page in the Elements tab and locate a <!– TEMPLATE STARTS –> comment, which names the rendered template. For lists using child views, check for data-view attributes and trace them to the parent view’s childViews function to identify the template.
Testing with Extensibility API
For SuiteCommerce or SCA Aconcagua (2018.1+), use the Extensibility API to test changes:
- Access Components: Test a component like PDP with:
var PDP = SC.Application('Shopping').getComponent('PDP');
PDP.setOption('custcol_gen_color', '1');
- Add a Child View: Test a new view (e.g., Vendor.Extension.Module.SimpleView) on the login page:
var Layout = SC.Application('Checkout').getComponent('Layout');
var SimpleView = require('Vendor.Extension.Module.SimpleView');
Layout.addChildView('Login', function () { return new SimpleView(); });
Layout.application.getLayout().getCurrentView().render();
Note: Use public API methods (e.g., getLayout()) instead of private ones (e.g., _layoutInstance) for stability.