Open page in new browser window with device mode dev tools - google-chrome

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

Related

How to use my PC Chrome as a mobile chrome permanently?

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)

IT Hit WebDAV AJAX Library on Chrome becomes unresponsive

I am experiencing an issue with opening a Microsoft Office Document, using IT Hit WebDAV AJAX library, in latest Chrome 39.0. running on Windows OS. It is a sporadic issue that occurs only in Chrome, and it happens when one opens a document multiple times. Word instance won't start, the page freezes and browser becomes unresponsive, and Chrome suggests killing the page. The only solution is restarting the browser, which solves the issue.
I have tried opening a document in Chrome on Mac OS X, and it is working fine. So are Mozilla and Safari on all operating systems. It seems to be a Chrome + Windows issue only.
Has anyone experienced this issue and is there a fix?
The Microsoft Office plug-in that opens the document displays a warning popup "Some files can harm your computer.", which is a modeless dialog:
If you quickly click on a link that opens the document more than one time the dialog will hide behind the main web browser window. As a result the web browser window is blocked.
You need to switch to that dialog and confirm or reject document opening, otherwise after some time Chrome will ask you if to kill the page or wait.
Note that there is no way to avoid that dialog, this is a built-in MS Office functionality as far as I know.
Chrome will only work good with ITHitWebDAV if the user has got Office 2013 or superior.
Google is blocking all Java applets and NPAPIs now, so good luck with that. I just detect the browser of the user that wants to edit a document, and if it's chrome, I warn him to change to another browser like Firefox with a modal, and that's all.
Very poor support between Chrome and ITHitWebDAV, and no much you can do about it.

Can i resize Chrome window using the console?

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.

How do you inspect the web inspector in Chrome?

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.

Chrome's Developer Tools open unmaximized after update, is there a way to make the window open Maximized again?

Is there a way to make the Developer Tools window open Maximized automatically again?
I've just updated Google Chrome (to version 17.0.963.56), and I realize when I open the Developer Tools, the window is not maximized anymore (I have 2 screens, and it automatically opened maximized on the second one before updating).
I have filed a bug report for you: http://code.google.com/p/chromium/issues/detail?id=115113
Try
Shift+Right-clicking it > Restore or Maximize.