![]() ![]() In competitors’ products, designers also went from manually resizing each individual element to manually setting resizing constraints on each object, then resizing the object. The changes are with regard to different spatial relationships between elements. “This process was very manual and tedious, especially when you consider that, generally, the layout of elements did not vary much from page to page. I am pretty exited with the cool new features, and hoping it to be more polished to make available for the stable Chrome release soon.“We found that in order to design for responsive environments, designers working in XD were constantly duplicating elements, putting them on a different artboard, and adapting them to a new screen size,” said Hoyle Wang, product manager for Adobe XD, as he explained the reasoning behind the new addition. Sensor emulation (touch, geolocation, accelerometer).Device presets for most popular devices.Here is a list of the DevTools new features for mobile development: You can pinpoint where painting jankiness occurs with another new feature, Paint Profiler too! Your device should launch the web page on Chrome.Īnd you should be able to navigate the page from both device and the screencast.Ĭlicking “Layers” tab gives you a visualized DOM layers to measure rendering and painting. Typing a URL onto the DevTools reflects on your device. Then click “Try Here” button to open a screencast window. Once you connect a deivice to your desktop with a USB cable, you should see an little device icon with “1”, which indicates the number of devices connected. Then open the DevTools and click the gear icon to manually turn on the screencast feature.Īlso, you need to enable USB Debug mode on your Android device. To use the experimental features, you need to enable the DevTools Experiments from chrome://flags/#enable-devtools-experiments. This new screencast comes with Canary build. This obscure feature has been intruduced to Chrome DevTools already a while ago, but the new and improved features just landed to Canary as an experimental tool. There is a newer addition to the Device Mode- a better screencasting feature. From the dropdown next to the device menu, you can pick mobile networks like 3G and EDGE to emulate the connectivity, and make performance testing easier. The new tool comes with the network emulation presets as well. Click a file to inspect the source code!Īpparently, with another new feature called Workspace, you can edit the media-queries on DevTools directly, and the changes reflect to the local file systems on the fly. Select one of these bars from the UI and right-click it gives you a select menu that says “Reveal In Source Code”, so mouseover it to view all CSS file paths. Clicking the icon at the left side of the device presets (the one looks like steps), you get the visual representations of the media-queries used for the page. What I found more useful in this Device Mode is the Media-queries tool. Also, switching its orientaion by swapping the width and height values by clicking the toggle icon. If you choose a device with a large resolution, you can make the screen shrinks to fit in the display pane too. Here you can resize the window along the ruler UI, or choose one of the devices from a dropdown menu. By clicking the icon, the regular webpage display pane becomes the device mode. Once you open DevTools in Chrome Canary, you see a little device icon on left in tab bar at the top. The Device Mode comes with presets of device information including screen width, height, and device pixel ratio from popular devices, like Nexus 5 and Samsung Galaxy series, and makes responsively designed web development easy for us. Currently, this feature is only available on Chrome Canary (v38 and newer). Last month at Google I/O, Paul Bakaus introduced a set of brand-new (still experimental) tools, called Device Mode for Chrome DevTools. ![]() This blog post is more of the abridged version of my original article, which uses more actual quotes (translated) from Google I/O. Note: I originally wrote this article for in Japanese, as a part of their Google I/O special editions.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |