Chrome's Device Mode is great for testing responsive layout, however, it seems that I can only enter it from the DevTools, unlike in Firefox where Ctrl+Shift+M takes me to responsive preview from the page directly.
Is there a secret shortcut / some extension for Chrome to enter the Device Mode directly?
When Device Mode is open and focused Ctrl+Shift+M will toggle Device Mode. There is no way to open DM without opening DevTools first. Device Mode is a part of DevTools not an independent feature.
This extension does what you want. (kinda)
Viewport Resizer – Responsive Testing Tool
It is better than nothing.
Related
Not sure if this is possible in other mobile browsers, but it is possible to open the devtools inside the Edge browser app in you phone?
I have this UI issue that that I can see on my phone and so far I haven't been able to reproduce it on Edge desktop or any other desktop browser for that matter; not even if I match the screen size using the dekstop devtools.
I need Edge mobile devtools specifically because the website is internal and only accessible through Edge.
Devtools are not available for Edge mobile.
If you want to debug the Edge mobile app, you can use Device Mode to simulate mobile devices in your desktop Edge Chromium browser. For the detailed steps, you can refer to this article.
If you're using Android devices, you can even use remote debugging. It can remote debug live content on an Android device from your Windows or macOS computer. You can refer to this article for more information.
It's possible with help of eruda project
Add bookmark on any website, name it as Open DevTools, put this script as a value
javascript:(function () {var script=document.createElement('script');script.src="//cdn.jsdelivr.net/npm/eruda";document.body.appendChild(script); script.onload = function () { eruda.init() } })();
Open website you would like to investigate
Open search bar and enter same name, Open DevTools - your bookmark will appear
Click on it, few seconds later you will see gear icon on the bottom. Click on this icon will open dev tools
I am on iPhone and it cannot access the camera from chrome. Is there any solution?
Error Message: "Unable to access video stream (Please make sure you have a webcam enable)"
source code "https://github.com/cozmo/jsQR"
Demo (I copied the same code from Author's demo)
This problem solved itself in an update of chrome. FINALLY! Safari is still better because It allows the user to save the setting and it never asks about the camera again for that particular url. Using QR codes in the browsers has allowed me to write "apps" in a browser and avoid the red tape of the big tech app stores.
hrmantra
is the site i want to view mobile view of. For which i have also changed my user-agent string in my pc's mozilla browser. I need this to be done, please help
You can use the Responsive Design Mode tool in Firefox to pick a mobile phone configuration or create a new one with custom settings. You can access this tool, as reported on the provided links:
From the Firefox menu: select "Responsive Design Mode" from the Web
Developer submenu in the Firefox Menu (or Tools menu if you display
the menu bar or are on OS X).
Picking a mobile device will automatically set the correct screen resolution, user-agent string and device pixel ratio (DPR).
i am working on opentok with nodejs.
i use tokbox for one-to-one videochats between users. It works properly in chrome, but not working in firefox.
it give me error
OT.Publisher.onStreamAvailableError OT_MEDIA_ERR_ABORTED: The selected
voice or video devices are unavailable. Verify that the chosen devices
are not in use by another application. (getUserMedia error:
NotReadableError)
Firefox can not open the same camera in different tabs. You'll need a second camera or set media.navigator.streams.fake to true in about:config which enables fake devices.
I can't figure out what is causing this issue on the BlackBerry Z10 where the mobile menu that I created for disinherited.com won't properly function as links.
The menu items won't click through to their href's or show their dropdown menus(javascript).
It works well on a number of other browsers and devices. This is just one that won't work.
Anybody have any suggestions as to what browser compatibility issues I might be missing?
The "About Us" link doesn't do anything for me (even on Desktop browsers).
I would guess that there might be some CSS (a layer maybe) that is interfering with the click/action event. I would suggest connecting remote web inspector to see what exactly is going on.
Did you know that BlackBerry 10 has some of the best remote web debugging capabilities?
Plug your device in via USB
Enable Settings -> Developer Mode
Open http://disinherited.com in the BlackBerry browser
from your desktop browser, open http://169.254.0.1:1337
You are connected to the live content, running on the BlackBerry, from your desktop browser. From there, you can inspect, debug, profile what your website is doing.