Skip to main content
Version: v11.9.2

Debug React Native Web Preview

Prerequisites​

Debugging Procedure​

  1. Open the app preview URL in Google Chrome.
  2. You can view and debug page scripts easily. For this, press Ctrl+P or Cmd+P and enter the page name.
  3. Components tab of the React developer tools appear in Google Chrome debug tools. In this tab, one can see the React Component tree.
note

Avoid using the elements tree in the Google chrome debug tools.

Web Preview Debug

  1. Select the component to see its props, state, and style details.
  2. Using regular expressions, components in the tree can be hidden or shown.
    • Click on the setting icon next to the search bar.
    • Select the Components tab from the popup.
    • Click on the add filter button.
    • Mention the regular expression. ^(?!Wm) can be used to view only WaveMaker components.

Filter view

  1. In style details, there is a trace object. Trace object contains sources that participated in the preparation of the final style. In the trace object, styles of later sources are overridden by the former sources.