WaveMaker Docs

WaveMaker Docs

  • Get started
  • Widgets
  • Mobile
  • How-to
  • Enterprise
  • Releases
  • Blog
  • Sign-in

›React Native

Mobile Development

  • React Native or Cordova

Cordova

  • Building Hybrid Mobile Apps
  • Native Device Support
  • First Mobile App
  • Mobile Design

    • Mobile Page Design
    • Gesture Support
    • Mobile Tabbar
    • Mobile Navbar

    Mobile Installer

    • Test Run (Preview)
    • Debugging Mobile Apps
    • Testing Hybrid Mobile Apps using WaveLens
    • Mobile Build - Android
    • Generating iOS and Android Distribution Certificates
    • Export Cordova zip
    • Mobile Build - Manual
    • Mobile Build - AppChef

    Mobile Integrations

    • Mobile Integrations - Amazon Mobile Analytics
    • Mobile Integrations - Amazon SNS
    • Using Push Notifications in Mobile Device
    • Invoking Web App APIs in Mobile Apps

    Offline Features

    • Offline Data Support
    • Implementation
    • Switching between Offline and Online Mode

React Native

  • Welcome
  • React Native Features
  • Supported Widgets
  • Variables
  • Build Installers
  • Debug Web Preview
  • Expo Debug
  • Styles
Edit

Debug React Native Web Preview


Prerequisites

  • Install React Developer tools from the Google Chrome web store.

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.
Last updated on 4/1/2022 by Swetha Kundaram
← Build InstallersExpo Debug →
  • Prerequisites
  • Debugging Procedure
WaveMaker
  • PRICING
  • PARTNERS
  • CUSTOMERS
  • ABOUT US
  • CONTACT US
Terms of Use | Copyright © 2013-2022 WaveMaker, Inc. All rights reserved.