We're building a React/Flux application and everything is running and works fine, except the debugging experience is HORRIBLE in chrome!!
When trying to set breakpoints on legit lines like this:
ReactDOM.render(React.createElement(AccountInfo, null), document.getElementById('AccountInfoContainer'));
The breakpoint jumps down a few lines. Or it looks like the breakpoint is set properly, but when you run the page the breakpoint is no longer where you thought it was going to be.
We installed the React Dev tools, which gave us some nice functionality in a new tab "React" tab, but the standard "Sources" tab is just not working right.
We tried setting type="text/jsx" to see if Chrome would understand the file more correctly, but that resulted in the jsx file not even loading...could be the fault of IIS though not Chrome.
React seems so great, but it appears as though jsx really isn't supported all that well yet. Is there another chrome extension that will make jsx debugging work better?
We could also do server-side react rending and try to end up with a js file instead of jsx, but that seems like another can of worms...especially in ASP.NET MVC
I don't have any issues with the Chrome debugger and JSX as long as Source Maps have been generated.
You may notice I am also using ES6 in this screenshot, also without any issue.
Related
Is it possible? For example, i want to be able to set a breakpoint in my component, hit it from chrome, and inspect state, props, methods etc.
I have set up the Debugger from chrome extension for VS code, but when i hit a breakpoint, VS code opens the bundle.js file instead of the actual typescript code. I suppose i will need to set up some kind of source mapping, if it's possible?
I'm working on a react app with create-react-app ejected (so that I can use css modules). It works perfectly in Chrome and nearly perfectly in Firefox (just need to make a few minor css adjustments), but in Safari, only the navbar is visible. Looking in the safari developer tools, http requests seem fine and there are no error messages. There are a few warnings about using Cloudinary images without http requests, but I get the same warnings in Chrome and the app still works fine in that browser.
Also, the images and elements that don't appear in the browser do appear in the elements section of the developer tools. The (now invisible) links even work. I thought maybe it was a z-index problem, so I set the background color to transparent, but the page is still blank. I'm not using the fetch API (per other suggestions on stackoverflow), and I tried adding -webkit- prefix to my css where applicable. In addition to css modules, I'm using styled-components.
Without error messages I really don't know where to start looking for a solution. Any ideas what could be causing this behaviour? I'm running the app on localhost and also Heroku, and am having the same problems with both methods.
Thanks!
Solution: apparently Safari deals with css positioning and z-index differently than Chrome and Firefox. I played with positioning (fixed, absolute, relative etc) so that everything appeared correctly on Safari, and the resulting arrangement also worked for Chrome and Firefox.
Edit: But there are still positioning problems in Microsoft Edge, so I'll have to make adjustments for that, too.
I have an angular application that run ok on chrome and firefox.
But on IE the application does not work.
My Big problem is that I can't find the error reason. and got some generic error.
How can I debug the application on IE or how can I find the reason for the Error
This means that ng module is failing to load. :)
Please look at your browser's console to find if any files are missing or not being downloaded correctly. Also it helps if you click on the link to http://errors.angularjs.org in your console, it will give details about which particular module is failing to load.
Check below link for complete details for resolution:
http://blog.technovert.com/2014/10/dependency-injection-fails-angularjs/
IE Debugging : First of all you need to ensure your Angular application works on IE please consider the use ng-style tags instead of style="{{ someCss }}". The latter works in Chrome and Firefox but does not work in Internet Explorer <= 11. Arguably, this is the biggest annoyance of IE—the page just doesn’t load and doesn’t give any errors. Sometimes you need to view the page again in Firefox. If it’s not an IE specific error, Firebug will pick it up. If Firebug loads normally, the chances are it’s one of two IE specific errors: a trailing comma, or unsupported XML syntax.
For minimize the application files I use
bundles.Add(new ScriptBundle("~/app").IncludeDirectory("~/Assets/app", "*.js", true)
);
(Part of asp.net mvc)
And from the layout page I take all the application files
#Scripts.Render("~/app")
Like I said this part of code worked for me in some browsers, But on IE It fail.
By Changing the script src to all specific files, I resolve this problem. and now on IE it work like the other browsers.
Maybe I miss a comma or ";" (end row) or something like that.
Thanks
need to check this page or api
http://henriquat.re/appendix/angularjs-and-ie8/necessary-changes-for-ie8-compatibility.html
https://docs.angularjs.org/guide/ie
weirdest thing just happened. My angular app was working fine until last night. This morning, when I run it, it doesn't work on Chrome. I haven't modified anything to the code, and I see no errors on the developer console. What makes it even more weird is, the app works just fine all other browsers and even in incognito mode in Chrome. I tried disabling some extensions but that didn't do the trick either. On the surface, what seems to be the problem is that the any paths following the hashtag is not being populated whether I use ui.router or ngroute. Manually typing the paths does not work either. Does anybody have the same problem? What is going on?!
Just clearing cache didn't work. I had to to clear the cookies and plugin data as well. I'm thinking it might be related to recent Auth0 implementation. Will need to look into it so the problem doesn't occur again. For now though, I will close the question.
Latest Update:
This got fixed in the new masonry version.
Original Post:
I have an AngularJS website with Bootstrap3 style, which works fine in Chrome, Safari and Firefox, but not in IE (and I thought those days would be over).
I use the Masonry-plugin to display some tiles. The first time I open the page IE11 sticks the tiles together. I believe it is because of some problem with the padding in bootstrap. When trying to debug the application or only show variable contents on console.log everything works fine. Also after reloading the page everything is rendered as expected, it is really only on the first time the page is accessed.
I've noticed that Masonry's website and examples work with IE so I'm trying to figure out what they have different.
The above mentioned problems also occur in IE10 - I don't have any information about IE9 and we don't intend to support IE8 or before.
Update: I've noticed that the masonry website doesn't use paddings (like bootstrap does) but margins instead, and indeed when I remove paddings and add margins, it works. However the question remains - Why doesn't it work with paddings?
Update 2: I have a working test which shows the error. It is quite extensive, and can be accessed here: http://server.grman.at/ie11-intro.html
It shows that the problem only occurs in IE, if the some script (probably the masonry library) is pre-loaded on a page before and afterwards used.
Here a screenshot of how it should look from Chrome:
And here a screenshot of how it looks for me in IE11:
Last Update: Yes, it's the masonry script, I've created a second intro page: http://server.grman.at/ie11-intro2.html which doesn't preload the masonry script and it works, now the quesion is - WHY?
After playing around with your demo a bit, I found that loading masonry.pkgd.min.js before Bootstrap and custom styles would resolve the issue for me. Something in Masonry's setup is breaking re-navigations in Internet Explorer - though I don't have specifics at this time.
Move the masonry script tag to the top of your document, above Bootstrap and your styles, and you should find that the issue is resolved.
The obvious and fast answer (as I'm not sure if the error is fixable in the masonry script in the first place) is, to remove a reference to the masonry script whenever you are not going to use it in the website.
Update:
This got fixed in the newer masonry version