Docs

You are viewing documentation for an older Vaadin version. View latest documentation

Docs

Debugging a Web Component Integration

Web Component integrations can be problematic. If your component does not work as expected, or as you would like, there are a number of things that you can try.

In this section, we detail 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 is 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 is not correctly synchronized to an attribute, select the element in the inspector and enter $0.somePropertyName in the console to check that the value is the expected one.

Events Not Sent to the Server

If an event not sent to the server as expected, select the element, and enter monitorEvents($0,'event-name'); in the console. If the event is triggered, you will see a log row and will 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 does not behave as expected, or do what is intended, you can use the browser debugger to set breakpoints at suitable places.

In more problematic cases, for example if the problem occurs on initial setup, you can add a debugger; statement to the Web Component code to ensure the browser always (and automatically) breaks 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 paper-slider component, you could:

  1. Launch the project in developer mode to ensure that any frontend 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() { function.

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

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

94248781-767A-4FE5-9293-17268446736D