I use the Chrome in my laptop with Windows 7 OS, and the Chrome on Windows provides a Device Mode(shortcut is F12) so that it can simulate a specific mobile device to get and display a Web page in a Chrome tab as follow.
However, such Device Mode is only limited on a single Chrome tab, so when you close the tab and open a new one, the new tab get and show the web page as normal, not as in the Device Mode.
So my question is How to set the Device Mode permanently, and when I open a new tab in the Chrome, it runs on Device Mode by default. Is there any method or plug-in can help me to achieve it?
I believe that this is not applicable as Google created that mode for inspection purposes only not for navigating or viewing.
So you will need a smartphone simulator like the one which is provided by Android SDK or the IOS simulator which comes with XCODE on mac, or you can use a real smartphone of course, and you can inspect on it via your PC using ADOBE Edge Inspect extension on chrome.
Chrome inspector mode is designed with testing in mind, and isn't intended for regular browser use. You might try a device simulator tool, like what's included in Xcode or Eclipse IDE.
Hope this helps.
I think this is something what you are looking for
Google chrome plugin
You can open devtool automatically with chrome switches, so i suppose that you can reach your goal with the correct one... our only problem is that chrome's switches are thousands... that's the documentation, good reading :D (unofficial documentation here)
Related
Using window.open to open a new window in chrome the device icon in the dev tools is not present.
window.open('https://google.com/', '_blank');
I feel like this is a bug in Chrome as I'm not sure why they would want to prevent it? Or am I missing a way?
I saw another question but the bug that was logged was about network throttling not allowing device tool available. How to toggle Device Mode on a popup window in Chrome?
I'm assuming this is a bug and have opened an issue
I followed the approach mentioned in how to emulate a mobile (android) browser on desktop
to project the mobile webpage's properties on desktop chrome browser. I was successfully able to do that but now I have some queries as mentioned below, please let me know your inputs on that
a) How to use the "Select element option" of chrome developer toolbar to view an element's property for a mobile webpage. In normal desktop chrome browser we have the web page displayed and below that the developer toolbar is displayed and we can easily spot the element using a pointer but with mobile webpage displayed on desktop chrome browser i am not able to use this option as the webpage is not displayed.
b) I tried to copy the xpath and other things from the displayed HTML (HTML of mobile webpage on desktop chrome browser) but it gave me an error that "You need to install a Chrome extension that grants clipboard access to Developer tools". I installed one such extension named: "Auto Copy" but then also I was not able to copy. Please let me know how to go about it.
Thanks a lot in advance,
Namit
For (B) – Judging from the discussion when that message was introduced, it sounds like you need to roll your own simple custom extension to enable clipboard access. Here's a sample manifest.json – I haven't tested it out myself, but it looks pretty straightforward. The extension development Getting Started guide explains how to turn a file like this into a working extension and install it locally.
Is it possible to resize the Chrome window using the developer tool's console? If so, what would the command be? becuase the window.resizeTo(w,h) didn't work for me.
Official Chrome issue says:
By Design we don't support resize/move for tabs, only constrained windows.
Windows in Chrome can be resized via Chrome extensions API, however it's not available from console. You should probably try using one of many 'window resizing' extensions. In the near future it will be possible for extensions to add own console commands, however as for now it's an experimental feature.
i think you can only resize windows that's you have created from the console, like popups
for example:
var pop=window.open("","","width=1024,height=768");
pop.resizeTo(100,100);
On macOS you can run: open -a Google\ Chrome --args --window-size=1366,768
Since Firefox 7, it's no longer possible for a web site to change the default size of a window in a browser, according to the following rules:
You can't resize a window or tab that wasn’t created by window.open.
You can't resize a window or tab when it’s in a window with more than one tab.
found on https://developer.mozilla.org/en-US/docs/DOM/window.resizeTo#Notes
some try and error seems to prove that these rules also apply in Chrome.
I would like to know how to use input[type=color] on Chrome Packaged App. When I open the HTML file on the browser, the input[type=color] works well, it pop ups the color picker, but when I used it on an app, it doesn't do anything. Please help me how to enable this HTML5 feature.
Are you looking at the app from a mobile device? The web browser for the device might not support input[type=color]. It looks like iOS doesn't at this time. See the compatibility tables.
I've got site that is correctly displayed on desktop version but has few bugs on iPad. What's the simplest way to detect problems if my OS is Windows?
Option 1 - Free, local machine debugging
You may use Safari browser for Windows (download Safari 5.1.7).
Steps
Enabling Develop menu in menu bar (Press 'Alt' key to open menu bar. Then follow to Edit menu > Preferences > Advanced tab. Find this option at the bottom.)
Then, follow through Develop menu > User Agent. Select iPad, iPhone etc.
There are more options in the Develop menu (e.g. Show Web Inspector) to help with your JavaScript etc debugging.
Credits to How to debug iPhone and iPad web applications, using Safari.
Option 2 - Paid, browser-based access to target browser/OS/machine
I've personally used http://www.browserstack.com/ and it lets you test the functionality on a wide combination. However debugging may not be as convenient here as it would be on a local machine.
There may be more companies providing similar services.
Beware of basic online emulators
As mentioned in a comment, be wary of 'emulator' websites. Example: A website I ran into claimed to emulate iPhone, with a picture of iPhone, and inside it was an iframe, being dutifully rendered by the browser I opened that website in (Firefox).
The best way I can think of(depending of your implementation) is to use the firefox plugin
https://addons.mozilla.org/en-US/firefox/addon/user-agent-switcher/
It allows you to switch to all sort of devices and see how they would appear on another device.
Here http://www.ampercent.com/test-website-design-iphone-ipad-mobile-devices/7075/ is a quick guide on getting you started.
There are also user-agent switchers for other browsers than FF like Chrome. Do a google search and try for yourself which one you like.