According to the official instructions using Chrome DevTools from the host browser to debug the connected mobile device, I see that the remote debugging window opens, where the layout is by default vertically split, i.e. the screencast of Chrome mobile browser appears on the left while the DevTools instance on the right.
I know that we can adjust the dock position of DevTools on the host browser. How can we achieve this similarly to split the remote debugging window horizontally, docking the screencast on the top and the DevTools on the bottom?
This isn't currently possible.
Outstanding feature request: https://crbug.com/620427
The more stars the request gets, the more likely the team is to implement the feature.
Related
when open chrome some element getting overlap
like As seen in this picture
I need fix this problem
Even I have faced the same issue.
What I did is I just opened dev tools in separate window.
Click on the 3 dots icon then you can find dock side option, In dock side select the first option which will pop out the dev tools into new window.
In this image you can find the dockside option
This is how the dev tools window will open
Now you can view the entire web page as well as dev tools.
Running Chrome 66.0.3359.170 (Official Build) (64-bit) on Windows 8.1
I can see the Device Mode toggle button in the dev tools window and can toggle it on and off but I cannot see the Viewport controls or anything resembling a Device mode menu bar.
Can someone tell me where it should be so I can first verify whether it is missing or I am just a little slow. Or whether I have to enable a particular menu bar or something.
Referring to the menu shown in the first image on this page-
Test Responsive and Device-specific Viewports
Face the same issue following steps help me
Inspect the window / open DevTools
Select 'Customize & control DevTools' option from the right top (indicated by 3 vertical dots).
select 'setting'
click on 'Restore Default and reload'
I have not launched the website yet. All the mobile testing websites I have found on the internet are asking for my URL. Is there any way to test a website that has not been launched yet?
You can use Chrome's responsive mode:
Go to DevTools (Ctrl+Shift+I)
Click the phone/tablet icon in topbar (2nd from the left) or Ctrl+Shift+M
Then you can resize website or select sample device from menu.
You can check it on more number of mobile simulators with chrome Device Toolbar that is inside Developer Tools. it looks great with many inbuild mobile device simulators. (That is second left mobile like icon on the inspect element).
Once you click on the icon you can switch through devices using the top device selector. You can even change width and height of the device and zoom it accordingly
You could try multiple extensions from chrome web store such as
https://chrome.google.com/webstore/detail/responsive-web-design-tes/objclahbaimlfnbjdeobicmmlnbhamkg?utm_source=chrome-ntp-icon if you are using chrome. Type "responsive" in search and you will get various extensions. You can also do ctrl+shift+m.
If using firefox you can do Ctrl+shift+m and you can view your website in responsive mode.
Also you can try resizing the browser as a third alternative.
If you are using Chrome then go through this. For Interner Explorer try this method.
My suggestion is to use Google Chrome and then inspect by right clicking on your webpage. Click on Responsive icon in the menu bar (shown in attached image) and adjust screen size.
You need to write MEDIA QUERIES for making your page responsive for different screen sizes.
use ngrok. It will expose the local/dev servers using their services. This command line tool will give you a resolvable url.
To use
$ ngrok http 80
will expose the web server running on port 80.
ngrok by #inconshreveable
(Ctrl+C to quit)
Session Status online
Version 2.2.4
Region United States (us)
Web Interface http://127.0.0.1:4040
Forwarding http://dbg6f82d.ngrok.io -> localhost:80
Forwarding https://dbf8f82d.ngrok.io -> localhost:80
This will be accessible across the internet.
Google Chrome dev tools no longer lets me re-position it to the bottom of the page instead of the right side. Anyone know how I can re-enable this function? It makes it very difficult to use it in certain screen layouts.
I'm using Chrome v 33.0.1750.154 m
Windows 8.1
Interestingly, the opposite is true in Canary(v 35.0.1900.0 canary). In canary dev tools are stuck on the bottom and can't be re-positioned to the side.
Is there some check-box I accidentally clicked or what??
Currently I can only dock or un-dock the dev tools panel, but the option to change it's position inside the window is gone.
If you click and hold the dock/undock button you get the option to reposition.
Cmd-Shift-D also works, as I just found out
Chrome's dev tools starting behaving strangely today. When I expand the dev tools pane, the main browser window scales down proportionately rather than becoming narrower (or shorter).
I've searched through the settings to see if there is something I inadvertently checked or unchecked, but haven't had any luck. I've also disabled all extensions and verified that I'm on the current version of Chrome.
You can see the effect in the screenshots below. The browser pane in the first screen shot has already scaled down, and scales further as I expand the dev tools pane in the second shot.
What should I do to fix this?
So it turns out it was a combination of settings I had inadvertently checked.
In Developer Tools Settings, Show 'Emulation' view in console drawer has to be checked
In the console drawer, on the Emulation tab, if Emulate screen and Shrink to fit are both checked, the browser window will scale as the dev tools pane is resized.
I unchecked Emulate screen and all is well.