Documentation

You are viewing documentation for Vaadin 23. View latest documentation

Documentation

Debugging a Web Component Integration

Web Component integrations can be problematic. If your component doesn’t work as expected, or as you would like, there are various things that you can try.

This section details the most common integration issues and what to do about them.

Java Issues

If the problem is on the Java side, you can use your standard IDE debugger to solve the issues.

Browser Issues

When the problem is in the browser, things can be tricky. The Chrome inspector is an invaluable tool when trying to figure out what’s wrong.

Configuration Issues

Use the DOM inspector to check that the element is configured correctly and contains the expected attributes. Problems often occur because properties are synchronized to attributes and vice versa.

If a property isn’t correctly synchronized to an attribute, select the element in the inspector and enter $0.somePropertyName in the console to check that the value is what you expect.

Events Not Sent to the Server

If an event isn’t sent to the server as expected, select the element, and enter monitorEvents($0,'event-name'); in the console. When the event is triggered, you see a log row and know that you have the correct event name and that the Web Component actually fires the event.

To log all events, you can leave out the 'event-name', but be prepared for a lot of mousemove events.

You can also use this to establish which properties are defined for the event, and therefore what to include in your @EventData annotation.

Debugging JavaScript Issues

If you need to debug the JavaScript, for example because the Web Component doesn’t behave as expected, you can use the browser debugger to set breakpoints as appropriate.

In more problematic cases, for example if the problem occurs on initial setup, you can add a debugger; statement to the Web Component code. This ensures that the browser always breaks automatically at a particular point. To do this, you need to edit the Web Component included in your project. All components used in the project are downloaded by npm and located in the node_modules folder, under the project root folder.

For example, to debug the increment() function in the paper-slider component, you could:

  1. launch the project in developer mode to ensure that any front-end file changes are used automatically after page reload;

  2. find paper-slider in the node_modules directory: node_modules/@polymer/paper-slider;

  3. add a debugger statement to the increment: function() { line.

  4. reload the page and click the "Increment" button with the inspector window open.

Tip
Disable the cache in the browser network tab
Disable the cache in the browser network tab to avoid loading old versions of the files you are debugging.

4545971A-76C6-4B44-891F-DFE1F736142F