I'm porting over a chrome extension to Firefox and need to refactor some of the css and html. I can't figure out a way to inspect the Panel though. Is there a way to do it, or is the only way trial and error?
Currently there is no way to inspect panels as they are. An somewhat-effective workaround could be to open your panel's html file in a tab in Firefox and use the responsive design view to view the panel at the intended size:
https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View
This problem is being worked on, here is a somewhat-related bug:
https://bugzilla.mozilla.org/show_bug.cgi?id=950936
Related
I am developing a static web app via React.js. I am using the google dev tool to inspect elements. In responsive design mode, everything is fine. However, when I select a specific mobile phone the footer element is not shown when I scroll to the bottom. However, it is visible on the console when ı inspect elements I can see the HTML info. I thought that maybe somehow I fixed the height for mobile devices or smt. Then I tried the firefox dev tool and I am able to see the footer. I have no idea which one is more realistic since I didn't deploy it yet. I deleted the history of browser before I tried.
More specifically; on the chrome dev tool when I select responsive design mode and change the resolution to 375x812 (same as iPhone X), I am able to see my footer. If I select iPhone x rather than responsive design mode, then I don't see it. It is more annoying that, both cases are okay for the firefox tool and I see my footer. So what is the problem ? Why two dev tools act so so differently for the same app and more importantly which one is true ?
Okay, I figured it out. There is a zoom option next to the width and height. It was 100% for my case, which should be "fit to window". I am leaving this dumb question here, it helps if any other beginner faces the same issue.
Can anyone help here, i'm wondering if this is actually a bug or expected behaviour?
Chrome Dev Tools seems to not be allowing hovering elements and highlighting of them in Iframes over a certain height.
For example, look here:
http://csreis.github.io/tests/cross-site-iframe-simple.html
now if you set the iframe height to 3000px, and then go and try to inspect the 'Cross the bridge' button. It does not highlight or allow you to select anything below the container you can see about half way down the picture.
I am getting this same behaviour on a different project I am working on, where the highlighting is not working in dev tools in an iframe.
Is anyone else getting this behaviour? I am using Chrome 88.0.4324.190 and am seeing this behaviour on other machines too. I am not getting this behaviour using Firefox which allows me to highlight all elements in iframes. I'm stumped on this one.
Thanks.
When I open Developer tools and turn on device mode, and click any drop down on the page chrome renders options with minimum width and rest of the area as black.
I dont know what is causing this error. I tried to update my graphics card driver, but problem still exists.
After some googling, got to know that this is an issue in Chrome browser itself. Refer the following link for more info - https://bugs.chromium.org/p/chromium/issues/detail?id=553274&q=status%3Aunconfirmed&sort=-id&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified&num=1000
The HTML and CSS are rather large so I can't pinpoint the issue or post a good example. When I toggle through my UI, the css styling seems to break, the most jarring of which is that the background changes to grey. I was wondering if anyone encountered similar issues. Here are some of the conditions for me.
-Chrome: Firefox & Safari working fine
-Small Screen: Problem doesn't occur on larger monitors
-Toggling developer console on and off fixes the issue
It's difficult to try and pinpoint the issue without seeing some code or even a fiddle, but when you open the inspector the page is resizing, and so redrawing (at least some of) the elements. It's also possible that there's a cache issue - I believe by default when you open the inspector the cache is disabled and so all css and scripts are downloaded again. That said, if you aren't refreshing the page it with the inspector open its unlikely to be that.
My money would be on the window effectively resizing when you open the inspector, and so some (if not all) elements are forced the redraw and thus re-evelauate their styles.
Maybe you could use Chrome's timeline to check what is being painted as time goes by. Try running that and opening the inspector while its active to try and see whats going on.
Looks like a long standing bug (years) with webkit:
How can I force WebKit to redraw/repaint to propagate style changes?
The solution that appeals to me is:
$('#body').hide().show(0); from Force DOM redraw/refresh on Chrome/Mac
to force a redraw.
I know this question may not fit well here but this really is driving me crazy for few hours now :( I use chrome to simulate how websites look on different mobile devices. I clicked something wrong that led to a grid with rulers to appear. I don't know WTF to do to disable this grid. This is the screenshot:
I uninstalled and reinstalled the browser and it returns back.
I reset the developer tools to default settings and it's still there.
This is really becoming a nightmare for me for few hours now. I want the regular emulation without these rulers and grid and top bar. Thanks
There is a small blue button on the left of Elements which actually does the magic.
You didn't click anything wrong. Your Chrome updated itself to 38.2125 and the emulator now has those attributes. Further more, the touch function is broken.
To fix the problem, download the "Canary" version of Chrome. You're still required to see the grid, but the screen is improved and easier to see your layout. Also, the touch function is fixed.
Get Chrome Canary here: https://www.google.com/intl/en/chrome/browser/canary.html
That button just enables/disables the emulator. The OP is looking for a way to disable the background grid while emulating mobile devices.
If you're looking to disable the multi-colored grid lines that show up as an overlay, check out the console dock on the bottom of dev tools. There is a tab labeled rendering and try disabling "Show composited layer borders". If you're still seeing the rulers, that setting is in the Settings (gear) of dev tools, there is an option under the Elements heading for "Show rulers".