I'm trying to debug my gatsbyjs code in visual studio code. I followed the docs and and tried slightly different approaches like https://github.com/Microsoft/vscode-recipes/tree/master/Gatsby-js.
I can start debugging and the site builds, but my none of my breakpoints in any of my files get hit, they get instead show up as unverified.
When pausing the debug process though, I (somewhat) randomly end up in the source code of any of the external modules, and there I am able to place breakpoints that do stop...
Is there maybe some setup step or something I'm missing to make it work on page components and other react components?
Thanks for any help!
Adding a
debugger;
statement in the JS react page components definitely works for me. But be reminded that in development mode (gatsby develop), some breakpoints will get hit on startup, while others are only hit on page request. This of course depends on where you place your breakpoints.
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.
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.
This is a really strange issue that I've been trying to figure out for several days with no luck. It only happens on slow iOS devices, it doesn't happen every time, and it only happens when using minified JS code (both Angular and my app code).
When the issue occurs it looks as though Angular just stops processing the code and leaves the "mustaches" on the page as can be seen in the attached screen shot. If I switch to using the non-minified versions of my JS files as well as the non-minified angular files then it works just fine. I've used Safari developer tools to debug this issue, but there are no exceptions thrown and it looks like all the data is being set correctly on the scope.
Any help/ideas with this issue will be greatly appreciated.
I'm a beginner to Angular, and am just starting some development.
I've taken the code from https://github.com/angular-app/angular-app, but am having to 'grunt build' every time to see my front end code changes on the browser. I've tried a variety of methods but am failing.
Is there a way to make changes, hit save, refresh your browser and see the changes, without having to build all the time?
Try grunt watch instead of grunt build. The gruntfile for that project seems to indicate that it will run the build task for you automatically by watching targeted files (e.g. .js, .less, etc.) for changes and then firing.
Note that you have to let it continue to run while you work, although you can run it as a background task and either hide the output or log it to a file.
Being a beginner, you might as well start from scratch.
This post
by Leon Revill contains pretty much step-by-step guides on the basics, structure, MVC, data-binding, events and filters. Regarding your build dilemma, just use your favorite IDE. I prefer you use WebStorm or PHPStorm and install the AngularJS plugin. This way, all you need to do is just include the Angular CDN or a local copy of angular.js then you are good to go just by coding and refreshing the browser.
Cheers!
I'm having issues with Silverlight 4 Out-Of-Browser, as specified in the title.
What I did:
Update project settings to enable Out-Of-Browser. This enabled OOB, but when I ran the app in this way it just displayed a white screen.
What I have done to try to fix this:
All references to the System.Windows.Browser.HtmlPage (to avoid DOM interaction) have been removed as per various sources including this SO question and this blog post.
Remove any references to SizeChangedEventHandler as per this SO question.
Clean projects/solution, including ideas such as deleting *.suo files as per this blog post
Uninstalling the installed OOB app, reinstalling
Also:
As commented on by "kobruleht" here, attempting to attach the debugger does not appear to work. Visual Studio (2010, SP1) reports that it is attached without help from me, but breakpoints are not being hit.
And so:
Can anyone advise on other courses of action? At the very least I'd like to be able to step through and hit breakpoints (or even break on Exceptions!)
OK, I have a resolution.
In AppManifest.xml I specified assemblies to be loaded, one of these was not loading correctly, which meant that App.xaml.cs->App()was never reached. The problem is difficult to diagnose because the program runs, with no errors or exceptions, but then displays a white screen - quite misleading.
For anyone experiencing the same problem, the simplest debugging steps to take in this case is to run the app in in-browser mode, copy the results from the Output window, then compare the results from the Output window when you try to run in OOB mode. Any discrepancies will give a good hint to the problem.
I should also mention, that I have not had trouble with SizeChangedEventHandler as mentioned above.