To throttle the network only and not the CPU, go the Network panel and select Fast 3G or Slow 3G from the Throttle list. To throttle the CPU only and not the network, go to the Performance panel, click Capture Settings, and then select 4x slowdown or 6x slowdown from the CPU list. Note that the Throttle list will be hidden if your Device Toolbar is narrow. Keep in mind that the throttling is relative to the normal capability of your laptop or desktop. Low-end mobile simulates slow 3G and throttles your CPU 6 times slower than normal. Mid-tier mobile simulates fast 3G and throttles your CPU so that it is 4 times slower than normal. To throttle both the network and CPU, select Mid-tier mobile or Low-end mobile from the Throttle list. To capture a screenshot of the whole page including the content that isn't currently visible in the viewport, select Capture a full size screenshot from the same menu. To capture a screenshot of what you currently see in the viewport, click More options > Capture screenshot. The sizing unit of the rulers is pixels.ĭevTools shows rulers above and to the left of the viewport.Ĭlick the rulers at specific marks to set the viewport's width and height. The device type field is the list that is set to Mobile by default.īack in the viewport, select the newly added device from the Dimensions list.Ĭlick More options > Show rulers to see rulers. The device pixel ratio, user agent string, and device type fields are optional. If you're adding your own, enter a name, width, and height for the device, then click Add. On the Settings > Devices tab, either choose a device from the list of supported ones or click Add custom device to add your own. # Add a custom mobile deviceĬlick the Device list and then select Edit. In this example, DevTools shows the frame for the Nest Hub. Note: If you don't see a device frame for a particular device, it probably means that DevTools just doesn't have art for that specific option. Events fired refers to whether the page fires touch or click events when you interact with the page. Cursor icon refers to what type of cursor you see when you hover over the page. Rendering method refers to whether Chrome renders the page as a mobile or desktop viewport. The table below describes the differences between the options. If you can't see the list on the action bar at the top, select More options > Add device type. Use the Device Type list to simulate a mobile device or desktop device. In the action bar at the top of the viewport, select a DPR value from the new DPR drop-down menu. Chrome uses the DPR value when drawing on HiDPI (High Dots Per Inch) displays.Ĭlick More options > Add device pixel ratio. In other words, DPR tells Chrome how many screen pixels to use to draw a CSS pixel. # Set device pixel ratioĭevice pixel ratio (DPR) is the ratio between physical pixels on the hardware screen and logical (CSS) pixels. DevTools opens the Sources panel at the corresponding line in the Editor. To find the corresponding declaration, right-click between breakpoints and select Reveal in source code. The orange bar with min-width breakpoints.Ĭlick between breakpoints to change the viewport's width so that the breakpoint gets triggered.The blue bar with max-width breakpoints.To show media query breakpoints above your viewport, click More options > Show media queries.ĭevTools now displays two additional bars above the viewport: In this example, the width is set to 480 and the height is set to 415.Īlternatively, use the width presets bar to set the width with a click to one of the following: Or, enter specific values in the width and height boxes. # Responsive Viewport Modeĭrag the handles to resize the viewport to whatever dimensions you need. # Simulate a mobile viewportĬlick Toggle Device Toolbar to open the UI that enables you to simulate a mobile viewport.īy default, the Device Toolbar opens in viewport with Dimensions set to Responsive. Use Remote Debugging to view, change, debug, and profile a page's code from your laptop or desktop while it actually runs on a mobile device. When in doubt, your best bet is to actually run your page on a mobile device. For example, the architecture of mobile CPUs is very different than the architecture of laptop or desktop CPUs. There are some aspects of mobile devices that DevTools will never be able to simulate. You simulate the mobile user experience from your laptop or desktop. With Device Mode you don't actually run your code on a mobile device. Think of Device Mode as a first-order approximation of how your page looks and feels on a mobile device. Alternatively, you can throttle connection speed in the Network panel.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |