56 lines
1.5 KiB
Markdown
56 lines
1.5 KiB
Markdown
---
|
|
applyTo: "assets/**/*.md, layouts/**/*.html"
|
|
---
|
|
|
|
## JavaScript in the documentation UI
|
|
|
|
The InfluxData documentation UI uses JavaScript with ES6+ syntax and
|
|
`assets/js/main.js` as the entry point to import modules from.
|
|
|
|
|
|
1. In your HTML file, add a `data-component` attribute to the element that will
|
|
encapsulate the UI feature and use the JavaScript module.
|
|
|
|
```html
|
|
<div data-component="my-component"></div>
|
|
```
|
|
|
|
2. In `assets/js/main.js`, import your module and initialize it on the element.
|
|
|
|
## Debugging helpers for JavaScript
|
|
|
|
In your JavaScript module, import the debug helpers from `assets/js/utils/debug-helpers.js`.
|
|
|
|
```js
|
|
import { debugLog, debugBreak, debugInspect } from './utils/debug-helpers.js';
|
|
|
|
const data = debugInspect(someData, 'Data');
|
|
debugLog('Processing data', 'myFunction');
|
|
|
|
function processData() {
|
|
// Add a breakpoint that works with DevTools
|
|
debugBreak();
|
|
|
|
// Your existing code...
|
|
}
|
|
```
|
|
|
|
## Debugging with VS Code
|
|
|
|
1. Start Hugo in development mode--for example:
|
|
|
|
```bash
|
|
yarn hugo server
|
|
```
|
|
|
|
2. In VS Code, go to Run > Start Debugging, and select the "Debug JS (debug-helpers)" configuration.
|
|
|
|
Your system uses the configuration in `launch.json` to launch the site in Chrome
|
|
and attach the debugger to the Developer Tools console.
|
|
|
|
Make sure to remove the debug statements before merging your changes.
|
|
The debug helpers are designed to be used in development and should not be used in production.
|
|
|
|
_See full CONTRIBUTING.md for complete details._
|
|
|