How do you develop and debug UI component for react-native? such as style, background color,size etc.
as https://github.com/facebook/react-devtools/issues/229 show that we can not use chrome develop tools to debug UI component(but we can use this tools to debug JS code).
Related
I am new to React Native. I am stuck with debugging. What is the standard way of debugging apps? I mean how should I configure WebStorm debugger for it to connect to the running app and stop on breakpoints I put in IDE?
And is there a way to use WebStorm debugger alongside Flipper (use it instead of Chrome)?
I currently use RN 0.70.6
I'm writing automation tests for Electron application using Java->Selenide (Selenium)->chromedriver 83.
I can successfully get access to visual elements of the app using xpath locators. But currently I need to check that window of my app is minimized after pressing "Minimize" UI button.
I can't find any easy ways to check that window is minimized from chromedriver.
May I use Electron API to get property win.isVisible or something like that? Or maybe any other ways to check that window of the Electron app is minimized?
Thanks
I am trying to deploy my Vue app in development mode. When I click on the Vue Chrome extension indicator it says:
Vue.js is detected on this page. Devtools inspection is not available because it's in production mode or explicitly disabled by the author
When I run the build task in Vue UI it defaults to production. How do I switch this to development?
I found the answer.
In Vue UI in the build section click the "Parameters" button next to the green build button.
This opens up the Parameters dialog, were one of the options is Specifiy env mode Switch this to "development" and then run build
So I have a React Native app based on react-native-firebase-starter that I'd like to debug using better tools than just console.log output via react-native log-android. Debugger breakpoints, object inspection etc.
For a standard React Native app, this would be possible using the "Debug JS remotely" option which, as I understand it, runs the app's JS inside desktop Chrome and hence can use it's dev tools.
This does not seem to work for React Native Firebase however. I presume this is because it uses a lot of native Android/iOS modules along with mobile-only Firebase auth, and thus is only happy running entirely on the device. ...or something like that.
Am I doing something wrong or is there a way round this? What debugging setup will give me the best DX here?
The example project react-native-firebase-starter is natively built (as opposed to being created with Expo) and will therefore work as expected with the debugging tools you have mentioned.
Make sure when running the app the build variant Debug is selected, as in Release mode Metro Bundler / Packager and the debugging tools are not available.
If the debugging level via Chrome Dev Tools does not suffice, there are other tools created for React Native with better functionality (such as breakpointing). The most notable ones are:
React Native Tools extension for Visual Studio Code. Allows setting breakpoints and iterating through code in the editor.
React Native Debugger, which has a similar interface to Chrome Dev Tools and allows breakpoints to be set in the Sources tab.
Up-to-date installation instructions and configuration are provided in their respective repositories.
I need do some functionalities in Android application background , so how to implement in my application ?
For React Native Android there is a native api called Headless JS for running js tasks while app is in background. You could also try
react-native-background-job which is actually based on Headless JS.