Use the Lighthouse tool to identify and fix common problems that affect your site's performance, accessibility, and user experience. This tool has been replaced by the Performance tool and the Memory tool. The Issues tool automatically analyzes the current webpage, reports issues grouped by type, and provides documentation to help explain and resolve the issues.įind and fix problems using the Issues tool When the Inspect tool is active, you hover over items in the webpage, and DevTools adds an information overlay and grid highlighting on the webpage. Use the Inspect tool to see information about an item within a rendered webpage. Inspect, edit, and debug HTML and CSS with the Elements tool Debug your HTML using the DOM tree, and inspect and work on the CSS for your webpage. You can edit in the tool while displaying the changes live in the browser. Inspect, edit, and debug your HTML and CSS. Use the Device Emulation tool, also called Device Simulation Mode or Device Mode, to approximate how your page looks and responds on a mobile device.Įmulate mobile devices (Device Emulation) By changing your JavaScript to release the element, you reduce the number of detached elements on your page, increasing page performance and responsiveness.ĭebug DOM memory leaks with the Detached Elements tool To increase the performance of your page, this tool finds detached elements that the browser cannot garbage-collect, and identifies the JavaScript object that is still referencing the detached element. Help you better understand your page's CSS and identify potential improvements. Help you find unused JavaScript and CSS code, to speed up your page load and save your mobile users cellular data.įind unused JavaScript and CSS code with the Coverage tool Provides a powerful way to script functionality, inspect the current webpage, and manipulate the current webpage using JavaScript. A great companion tool to use with others tools. Track changes to files using the Changes toolĪn intelligent, rich command line within DevTools. Shows you what changes to make to your actual source files after you use DevTools to modify your webpage files sent from the server. Tracks any changes you've made to CSS or JavaScript in DevTools. Use the Application tool to manage storage for web app pages, including manifest, service workers, local storage, cookies, cache storage, and background services. Inspect and modify CSS animation effects by using the Animation Inspector in the Animations tool. Navigate webpage layers, z-index, and DOM using the 3D View tool Debug your webpage by navigating through the DOM or z-index stacking context. ToolĮxplore the web page translated into a 3D perspective. Microsoft Edge DevTools includes the following tools. The Settings pages can turn on additional features of tools.The Command Menu is a way to directly use features of tools.The Quick View panel is an additional toolbar and area to hold tools, below or to the right of the Activity Bar panel.The following features are additional ways to access the tools: More optional tools, on the More tools ( ) menu, such as the 3D View and Detached Elements tools.Optional tabs, for optional tools such as the Welcome and Network tools.Three permanent tool tabs on the Activity Bar, for the Elements, Console, and Sources tools.Two icons on the Activity Bar, for the Inspect tool ( ) and Device Emulation ( ).
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |