I don’t know what happen to my WebStorm settings but previously whenever I add new react component it gave me a warning by adding underline above the component name. But now it is not showing any warnings. Why?
Please see my screenshot example currently in screenshot function is not defined so it gives underline.
How to reset the setting?
In screenshot I added Button,Dialog,DialogTitle but not imported. It is not giving any warning, why?
We intentionally decided not to mark the components as unresolved because there were quite a lot of patterns of defining the React components, especially in the component libraries that WebStorm couldn't recognize. So instead we decided to only show the missing import inspection for the cases where we knew where the component was defined.
We will review of how it all works now and will enable the inspection if it doesn't generate too much false positives.
Please vote for WEB-32549 to be notified on any progress with this feature
Related
I'm working my way through the wonderful Serverless Stack Tutorial, and I reached the chapter on using a React ErrorBoundary to view debug information. In the chapter, it describes how one should see debug information when running the application locally (as shown below in this image from the chapter).
I've made sure that I've copied the code and set it up correctly. However, I'm not seeing the debug information in my local debug instance. I only see the fallback UI:
I'm wondering if I'm using a later version of either React or other services than used in the tutorial. I've committed my code to a separate branch in case anyone would be willing to pull/fork and try it. I'd appreciate any assistance.
Update
I found my way to this Github issue describing changes in behavior between React 17 and React 18. The issue led to this CodeSandbox example. I noticed one of the examples displayed an overlay which looked similar to the one in the tutorial example. I saw this text at the bottom:
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.
This error overlay is powered by `react-error-overlay` used in `create-react-app`.
Searching for react-error-overlay led me to this package. I can see this package is included in my code as installed per the tutorials instructions. However, it does not seem to be running to display errors during development.
I have worked with React.js on and off for several years. When I make certain kinds of mistakes in the jsx code, React.js silently fails. Here's what happens:
Compilation (with webpack) appears to succeed and produces no error messages or warnings.
But when I open my index.html file, all React components are missing from the page. (The nav bar, which I have coded directly into my index.html file, is still present and is styled correctly. Below that, where my React content is supposed to be, the page is blank.)
The browser console doesn't show any error messages.
For some mistakes, when I inspect different versions of the page source using my browser, I see that the <div data-reactroot> element was present before my breaking change, but is now absent. For other mistakes, <div data-reactroot> is present, but its contents are empty or commented out.
There is no error message to help pinpoint the source of the problem, and in my experience this same behavior can be caused by many different kinds of mistakes. So my question is, how should one debug these silent failures from React?
I'm looking for a general debugging approach, analogous to these tips for debugging CSS. Good answers might include a list of mistakes to check for, useful debugging tools, or other ways to narrow down the cause of the problem.
New to Kiwi TCMS and running through tutorial.
In https://kiwitcms.readthedocs.io/en/latest/guide/testplan.html#default-components, it explains a 'Default Components' tab in test plan. Problem is, the tab is missing in our Kiwi setup. Cannot find related steps in documentation about this either.
Is there a setting/process not discussed in documentation to enable it?
It was removed in:
https://github.com/kiwitcms/Kiwi/commit/09321236ee2ecbdfc2d001a0e1e28b0504c30171
Remove TestPlan components functionality
this functionality was never used and never intended to be used in
such a way. Components are something that is attached to test cases
not test plans!
This question already has answers here:
How do you debug React Native?
(48 answers)
Closed 5 years ago.
How do I properly debug in React Native? From what I've seen so far, the debugging messages given aren't too useful for narrowing down where to look in my code. I just get a stack trace that only mentions dependencies in node_modules
For example:
Android emulator image (sorry, don't have enough reputation to show image on this post)
In the above error, I understsand that somewhere a non-Component object got passed in, but I have no idea how to track it down; the entire stack trace only mentions files from node_modules.
I have tried using Chrome Developer Tools as well:
Chrome Developer Tools image
I have also tried React Developer Tools and it wasn't helpful either.
How do I go about getting output from debugging that is actually helpful and linked to the code that I wrote?
Unfortunately the stack trace isn't always helpful since in this case you have to go through the bridge, and there isn't any single catch-all answer to how to get the information you need.
In this case, you're right that you most likely made a mistake returning a proper JSX object in one of your components. If you remember which components you recently added to your app, which components make up the navigator route that led to the problem, etc, you can make an educated guess as to the set of possible problematic components, and narrow that set down by commenting things out. Once that set is a reasonable size, triple-check your render methods and make sure nothing weird is going on.
You can write your own debug messages to the chrome developer console to help give yourself an idea what your app is doing (e.g. rendering this component, fetching that data from shared store, etc) using if(__DEV__) console.log("Your message here"). This will check if the app is running in a debug vs release build, and only log the messages if you are running a debug build.
You can use adb logcat for android and the XCode console for iOS to see the native debug logs, although I don't think they'll help in this case.
You can draw a picture of your component tree, put a debugger statement at the beginning of every render method, and check off components one-by-one until your app stops trying to render things and you know you've hit a problematic component (React will render components recursively, going from top-to-bottom for components on the same level in the tree).
I know it's frustrating when you can't immediately tell where the problem is by glancing at the stack trace but sometimes that's life.
Is there a way to directly manipulate styles in the chrome dev tools while debugging in React-Native like there is for manipulating the styles of a webpage (like below)?
Yes, given the fact, that style is just a property in react-native and you can edit props on the fly with React chrome extension, it should be possible. Should, because I've had hard time making it work, maybe you'll have a better luck :) However I've seen it work in some video...
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en
Try this: https://github.com/jhen0409/react-native-debugger
Go to debugger integration and look for elemental inspector, and there i believe you can change style in runtime.