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.
Related
So it seems that the device toolbar usually present in any regular DevTools instance is missing when inspecting a remote instance.
And in such cases the device type is set to "Mobile", with the mouse pointer set to a circle, as to indicate that.
Here's how to reproduce this:
start a new headless instance, e.g., with:
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --headless https://example.com
using another Chrome instance navigate to chrome://inspect and inspect the remote tab.
as you can see there is no device toolbar.
I also tried to send some Chrome DevTools Protocol commands like:
Emulation.setTouchEmulationEnabled
Emulation.setEmitTouchEventsForMouse
Emulation.setDeviceMetricsOverride
But to no avail, something happens but the behavior looks broken... I suspect that this is something concerning the DevTools frontend, and not the inspected Chrome instance.
Do you have any idea about how can I work around this? My ultimate goal is to manually interact with a remote headless instance using a desktop device type.
If I understand you correctly, you want to do manual interactions with a remote instance using a desktop device. You should just be able to click the device icon at the top left of your devtools window to turn off mobile.
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)
Does anybody know how to implement receiving of push notifications outside and without running browser?
There is some nuance to this:
Chrome for Android: Push messages will wake up the Service Worker and Web App even if the browser is closed. This is the default and our ideal position across all platforms
Desktop Chrome: Push works and will wake up the service worker if the browser is still open. However it will not work if the browser is closed. You can force the browser to remain open if you have a Chrome App that is set to run in the background. Other than that we (the Chrome team) are working out how we enable this by default on Windows, Mac and Linux.
Chrome for iOS: Push just does not work on this platform
Chromium blog has a post with code examples: http://updates.html5rocks.com/2015/03/push-notificatons-on-the-open-web
And the documentation was updated too: https://developer.chrome.com/apps/cloudMessaging
It is possible to write Chrome extension where background script can run if Chrome is allowed to run in the background (configurable in settings) and it can use GCM.
We are trying to run some automated tests (coded ui based) on our mobile application via Chrome browser.
In order to make the tests available to run, we must set the browser to work as 'emulate touch events'.
The thing is that as part of our test flow, a new chrome browser is being launched on each test but the definition is gone.
I already check this one, but it doesn't work:
How to Always Emulate Touch Events in Chrome Dev Tools?
Any other suggestions?
Thanks,
Yair
I believe that the dev tools window must be opened for the overrides to kick in, have you tried that?
According to Google this can be accomplished by visiting "chrome-devtools://devtools/devtools.html" in Chrome but now visiting that page in the stable version of Chrome (or Canary), just shows a 99% stripped version of the inspector.
To reiterate my "title" this is in reference to "inspecting" the inspector. Not just inspecting a normal webpage.
And while I don't think it's necessary to know to resolve the issue, I"m inspecting the inspector so I can style it as discussed by Paul Irish and here: https://darcyclarke.me/articles/development/skin-your-chrome-inspector/
Follow these easy steps!
Press Command+Option+i (Ctrl+Shift+i on Windows) to open DevTools.
Make sure that the developer tools are undocked into a new window. You may have to undock from the menu:
Press Command+Option+i again on this new window.
That will open the DevTools on the DevTools.
You can redock the page's DevTools if you want.
If it's not already, select Elements — it's the first icon at the top of the inspector.
A little beyond the scope of your question, but still valid in understanding why you're experiencing your problem can be found by understanding how Chrome Developer Tools: Remote Debugging works.
Open chrome://inspect
Open the inspector on that page (cmd + alt + i)
Scroll to the bottom of the page, under the Other section click the inspect link
The URL in the Other section should look something like this:
chrome-devtools://devtools/devtools.html?docked=true&dockSide=bottom&toolbarColor=rgba(230,230,230,1…
EDIT: they've fancied up the chrome:inspect page so you have to click the Other header on the left to get this to work now.
I just got this to work. The key is that you have to start up chrome in 'Remote Debugging' mode.
on OSX, open an terminal window and execute the following:
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
On windows, Its
chrome.exe --remote-debugging-port=9222
(better windows instructions can be found here: https://developers.google.com/chrome-developer-tools/docs/remote-debugging#remote)
This will start up an instance of chrome, that will send debugging messages to a local webserver on port 9222.
If you access that web service, it will give you the ability to use the inspector to inspect any chrome window that is running. Since we want to inspect the inspector, we need to start an inspector window first (As above Use the shortcut keys; for Mac it's Command+option+i.)
Now, go ahead and navigate to
http://localhost:9222
It will present you with a list of windows to display in the debugger. Select the window that starts with "Developer Tools" and you'll be able to inspect the css for the inspector.
Its hard to see in the image below, but on the left I have my chrome window pointing at the remote debugger, highlighting one of the toolbar labels. On the right you see it lit up with the tooltip just as if we were debugging a web page.
A few weeks ago somebody pointed this out in stackoverflow's "javscript" chatroom. First, and very importantly, make sure the inspector is undocked from your browser window. Then it's just a matter of opening a inspector window and then inspecting that window. In windows it's CtrlShiftI (Edit: I said, CtrlShiftI but that brings up the console inspecting the console... you should be able to navigate back and forth.) for the keyboard shortcut. (Other keyboard combos for other options and OSes here and here.) Just do that twice and you're good.
Edit: ok, you're probably confused as to undock the window. This is what you'd click if it's docked..
Edit II: I'm not quite sure why you can't inspect. JDavis's answer is consistent with the Google Docs for Apple computers. If you're using Linux it appears to be the same as Windows. You supposed to hit the inspector key combination while the focus is over the inspector window.