- Overview
- Debugging options specific to Chrome, IE 11, Edge,...
Check the "Responsive Web Design" pages
The pages in Responsive Web Design mode can be checked like any other WEBDEV page in the browser of your choice. Then, all you have to do is reduce (in "Desktop First" mode) or increase (in "Mobile First" mode) the browser width to see the changes in the page. To save time during the real tests on the different devices, a debugging option of browsers can be very useful. Used on the development computer during the "Go" test of pages, this option allows you to get a very precise idea of page rendering: - in their "Desktop" version, for browsers on PC or Mac,
- when they are viewed from an iPhone, an iPad, a Samsung S4, a Nexus 5, 6, 7, ...
Debugging options specific to Chrome, IE 11, Edge,... For example, with Chrome, press the F12 key to display the debugging options. The "Toggle Device Mode" button (Ctrl + Shift + M) is used to switch to "device mode" emulation: Then, a "Device" combo box allows you to select a device in order to see the site like if it was a mobile device and not the development computer. For example, the site is run from the test on a development computer in Windows but its rendering is identical to the one displayed on an Apple iPhone 6: The standard rendering of the same site is as follows: Very useful to check the "Office" version and the mobile version of a page for a site with dynamic serving, or to adapt a Responsive Web Design site. The option is presented here in Chrome, it is also available in Internet Explorer 11 and Edge by using F12 then the "Emulation" pane. |
|
|
|