I'm using on a website the fullscreen feature offered by HTML5. With chrome I can modify the style with webkit developer —in fullscreen mode— just fine.
But when I'm using Firefox with Firebug, I can't, because when I clink on the firebug panel (on a separate window on another monitor — I have a dual monitor setup) the page exits fullscreen mode.
How can I resolve this?
Edit, additional info:
I'm using Ubuntu 12.04.2, Firefox 21 with Firebug 1.11.4
I've tested this on Windows 7, Firefox 21 and the behavior is the same.
I found the solution here: Html5 video won't stay full screen on second monitor?
In brief, set full-screen-api.exit-on-deactivate to false in about:config. It's a configuration setting available since Firefox 13.
For anyone interested, the bug is explained here: Bug 724554 - Don't exit fullscreen when focusing window on different display.
Related
I'm using Bernardo Castilhos' HTML 5 Drag&Drop Polyfill:
https://github.com/Bernardo-Castilho/dragdroptouch
Here is a demo:
http://bernardo-castilho.github.io/DragDropTouch/demo/index.htm
Some time ago it stopped working on windows-based desktop touchscreens. I do not test it very often on those devices so I don't know when it stopped working.
In firefox browser a preceding double tap on the element makes the dragging working, in chrome / edge all the actions on the touchscreen are ignored.
Does anybody has a workaround for enabling "HTML5 draggable=true" elements on windows touchscreens? It works perfectly on android / iOS.
Thanks
The issue was fixed: https://github.com/Bernardo-Castilho/dragdroptouch/issues/40
But the developer forgot to update his own demo / example-page.
So just use the version from april that is provided at github and it works.
I'm making my portfolio website and I'm using pure HTML 5 no .js the about page doesn't work on iPhone and doesn't scroll everything together some of the elements positions are fixed and don't scroll. I don't own an iPhone but is there anyway to simulate the iOS on computer so I can debug the page? And is there such a tool like "inspect element" in chrome on the iOS safari? If not how can I debug and find how the browser is rendering wrong on the phone? Cause I validated my code and it's supposed to work, but its not!
You can simulate iOS using Xcode and Mac OS.
And for the debug purpose there is no inspect element in Simulator. Yes you can take a help of Accessibility Inspector
In the Simulator >> Go to Settings >> General >> Accessibility
Turn on Accessibility Inspector - This will help you to inspect different elements.
Something important to bear in mind is that because of Apple's policies, all browsers must use Safari’s layout engine to render pages, that means there are very few differences in rendering a page between Safari and other browsers on iOS.
There are two methods that you can use to debug a web page running on your iOS device on your using a browser on your Mac or Windows computer:
1. Debug using a Mac
If you have a Mac, you already have tools to live-inspect and debug web pages on your iOS device.
See here: https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Introduction/Introduction.html
2. Debug using Windows
Xcode and MacOS are not the only way to debug websites running in a browser on OSX. There's a few ways:
Telerik
WineRE
I personally use Edge Inspect when I'm forced to use Windows.
Adobe Edge Inspect
http://www.adobe.com/devnet/edge-inspect/articles/browser-testing-across-devices-with-adobe-edge-inspect.html
The Firefox Web Developer's Toolbar had an option under Information to see the topographical information about a page: what's inside of what. Is there any way to see that with Chrome's Dev Tools?
I installed the Web Developer's Toolbar on Chrome but can't see any way to turn the toolbar on. Then I found something from 2013 about Google disabling toolbars.
So, is there a way to see what elements are inside of what elements with Chrome?
I'm using Chrome 34.0.
Thanks
The Pendule Chrome extension has a Topographic View which works like the Firefox one.
And about the Web Developer extension in Chrome, after you install it, you'll be able to enable it from chrome://extensions/, it will show a gear icon button at the top right of the screen.
According to William Price's comment, something that was once called "Tilt" in FireFox is meant. We considered doing the same thing, but since it was impossible to correctly display overlapped elements' contents (IIRC, Tilt had the same issue), we abandoned that idea. Instead, we've got the Layers panel, which displays compositing layers (see Layer composition in the chrome dev tools).
Hi How I can take a full screenshot of webpage on a Windows computer using any browser?
Whenever I take screenshot with PrintScreen it take screenshot of only displaying page, but I want screenshot of full page in height. Is it possible we can take full screenshot including hidden eight?
Sorry for my bad English.
I have firefox and chrome.
Less the extensions, the better. Without any extensions for chrome and firefox
Chrome - Go to chrome debug mode using inspect element or using
ctrl+shift+I or using F12. Then press ctrl+shift+p. And if you start typing screenshot you will see options and choose Capture full page screenshot.
And
Firefox - shift-F2 or go to Tools > Web Developer > Developer Toolbar
to open a command line. And type screenshot --fullpage . This one Taken from here.
Use some extensions such as Fireshot. The extension is available for both Firefox and Chrome.
Link: https://chrome.google.com/webstore/detail/capture-webpage-screensho/mcbpblocgmgfnpjjppndjkmgjaogfceg?hl=en
Full Page Screen Capture board is most popular extension for doing it in Google chrome, it has simple and intuitive UI, very convenient.
Webpage Screenshot is popular extension for doing it in Google chrome:
https://chrome.google.com/webstore/detail/webpage-screenshot/ckibcdccnfeookdmbahgiakhnjcddpki/details
This isn't specific for browsers but there is a tool on windows called the snipping tool and it can take screenshots of anything.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Debugging JavaScript in IE7
Firefox has Web Developer plugin and Firebug for troubleshooting html/css/javascript issues. Google Chrome and Safari have a very similar console and right-click options for "Inspect Element".
Does IE7 have anything similar for troubleshooting layout/html/css issues?
Yes - The Internet Explorer Developer Toolbar
Download details: Internet Explorer Developer Toolbar
You can also use Firebug Lite, wich works on IE, Opera and Safari.
It's a Javascript implementation that you can load with a simple bookmarklet.
As SO doesn't allow Javascript, here is the bookmarklet source code (just copy paste to your browser location bar (always make sure it's safe before executing random javascript (In any case check the first link)))
javascript:var%20firebug=document.createElement('script');firebug.setAttribute('src','http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js');document.body.appendChild(firebug);(function(){if(window.firebug.version){firebug.init();}else{setTimeout(arguments.callee);}})();void(firebug);
Firebug Lite supports all basic commands of Firebug.
I have also used Debug Bar.
Check out the IE Developer toolboar.
Web Development Helper
Web Development Helper is a free browser extension for Internet Explorer that provides a set of tools and utilities for the Web developer, esp. Ajax and ASP.NET developers. The tool provides features such as a DOM inspector, an HTTP tracing tool, and script diagnostics and immediate window.
Web Development Helper works against IE6+, and requires the .NET Framework 2.0 or greater to be installed on the machine.
Once installed, the tool can be activated using the Tools | Web Development Helper command. You can also customize your browser's toolbar to add a button for this command to facilitate frequest use. Clicking on the menu command or browser button brings up the tool's console window and set of commands.
Page Features:
DOM inspector allows viewing all elements, selected elements, or elements matching an ID or CSS class, their attributes and styles.
Capturing a screen shot of the current page.
Viewing page information such as metadata, tags, and linked resources. .......
unfortunately it seems microsoft have discontinued it, the page for the toolbar now just says 'We are sorry, the page you requested cannot be found.'
I reckon because its built into 8 they have removed it for download, and cant be bothered with helping out us devs who are forced to make our projects work in their more archaic browsers :'(
Also before anyone says it, IE8 compatability mode != IE7
There's a toolbar you can get but it still doesn't match up to Firefox, especially for javascript debugging.
IE8 will be a huge improvement for development.
The following is specifically for IE7, other versions are probably similar.
Here is the new link to the developmment tools from microsoft.(as of 4-26-2011) IE Development Tools
Once installed, you will need to enable the toolbar.
To Enable, click on Tools | Manage Add-Ons | Enable or Disable Add-ons, to enable the addon.
To add the icon to the IE Toolbar, right click on the IE menu | Customize Command Bar | Add or Remove Commands. Add the "< (arrow) >" icon.
Hope that helps.
You can also use IE watch, which is like firebug, but you need to buy it. It is a 30 days trail version.
Actually, the best add-on for developers to IE would be Fiddler. It has a number of features that the other browsers possess.