Hi all,
I’m attending a course related to CSS, and I use oftern Firefox as browser for such course. A typically page of the laboratory of the course, contain tre section: one with explaination, the other one as input area (like a playground for HTML, CSS and JavaScript), and a third one that is the “rendered” page of what you have inserted in the second area, the playground. There is a button for render the third area in fullscreen. My problem is that, when I put the rendered area in fullscreen, if I open the develoopers tool, they are always refered to the “whole” page (not just the part that is in fullscreeen now). Such behaviour is different on other browsers (With Chrome for example, when I have the rendered page at fullscreen,if I open the developer tools they are related just to the rendered page). Can someone help me?
Hello Antonio, I’m not sure I understand what’s going on, could you share the link to such the so we an investigate ?
Also it would really help if you can add some screenshots showing the difference between Firefox and Chrome
Thanks!
Hi, I will try to provide more details. It will not be useful to share the link, because you should have been provided of my credential, because it is in an area of the website that need credential to be navigated. I provided six screenshot.
Screen no. 1 is referred to the web page of the course opened with Chrome, screen no. 2 it is when i put in fullscreen the part rendered (that is the part bottom right of screen no 1) and in this situation, if I call google inspector, I arrive at screen no. 3 (that is good for me). When I do the same with Firefox (whole page screen no. 4), and put the rendered image in full screen (screen no.6) opening FIrefox dev tools, i see for few seconds the page as it is selected, but I do not see the dev tools. If i came back out of the fullscreen (i.e. I come back to the whole page, I find the inspector opened, and i can analyze just the “whole”, not only the rendered page. I need to work only on the rendered because I try the working of the media query, and the number of oixels at which the screen change behaviour does not reflect what i set on css (i.e. I set the screen beaciour changes at 600 pixel, but it changes at 1400 piexel because I have on the screen also the left part). Hope this is more clear now. Thanks a lot!
Oh okay, thanks for the screenshots, that’s helping.
This looks like 1954956 - DevTools toolbox no longer appears in DOM fullscreen mode
Could you try downloading Firefox Beta (137.0b10) and see if this works for you?
Hi Nicolas
Many thanks for your help, unfortunately I didn’t find how to download Firefox Beta (137.0b10). I downloaded 137.0b9 (64-bit) and also Firefox developer Edition, but with both these versions the èproblem is the same. It seems that the fullscreen area is kept to be treated just as a part of the whole page, and not like in Google Chrome, in which indeed the part at the fullscreen is seen as a “new” whole page, that’s why the inspector “works” just on that part ignoring what is out of the viewport.
Still Many Thanks
Antonio
The link for beta in Download and test future releases of Firefox for desktop, Android and iOS. should now point to 137.0b10 (at least it does for me). That’s the version the fixed was added in, anything older still won’t work
Hi Nicolas, I got it and… it works!!!
Many many thanks at all!
Apologize for delay in my answer, finally I found out the version 0b10 and it works as aspected.
All the best!
Antonio