{"id":15718,"date":"2023-11-27T17:30:34","date_gmt":"2023-11-27T17:30:34","guid":{"rendered":"https:\/\/businessyield.com\/tech\/?p=15718"},"modified":"2023-11-27T17:30:36","modified_gmt":"2023-11-27T17:30:36","slug":"devtools-everything-you-need-to-know","status":"publish","type":"post","link":"https:\/\/businessyield.com\/tech\/technology\/devtools-everything-you-need-to-know\/","title":{"rendered":"DevTools: Everything You Need To Know","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"\n<p>Every modern web browser includes a powerful suite of developer tools, also known as DevTools. These tools do a range of things, from inspecting currently-loaded HTML, CSS and JavaScript to showing which assets the page has requested and how long they took to load.<\/p>\n\n\n\n<p>Web developer tools help developers in the process of testing as well as debugging their codes. These development tools are utterly different from IDEs and other website builders. It is because these are not meant to help in the direct process of a webpage creation. Instead, they help in testing web pages or web applications.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-overview-of-devtools\"><span id=\"overview-of-devtools\"><strong>Overview of DevTools<\/strong><\/span><\/h2>\n\n\n\n<p>Web developer tools allow professionals to create software and debug and test their code on web development projects. These tools also help individuals review the user interface of a web application or website. While these tools may not help developers build an application or website, they allow them to review the security and aesthetic features and design custom website elements. <\/p>\n\n\n\n<p>They may be available to web developers as add-ons and built-in features in web browsers. <\/p>\n\n\n\n<p>When choosing a program, professionals may consider various factors, including ease of use, scalability, security, functionality, and cost.<\/p>\n\n\n\n<p>While web designers and developers may use several programs to create, manage, and assess a website or application, such as DevTools and website builders, these resources have distinct differences. Website builders assist with the direct process of web application and site creation. <\/p>\n\n\n\n<p>Alternatively, DevTools are programs that allow web developers to test and analyze the performance of their code. They also make improvements to existing web pages and apps.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-examples-of-devtools\"><span id=\"examples-of-devtools\"><strong>Examples of DevTools<\/strong><\/span><\/h2>\n\n\n\n<h3 id=\"notepad\" class=\"wp-block-heading\"><strong>Notepad++<\/strong><\/h3>\n\n\n\n<p>Notepad++ is a powerful open-source code editor that Windows users can rely on to review and improve text within a website or web application. Although it may not have a unique aesthetic theme, it offers web developers a variety of features that can help them edit their projects and debug their code when necessary. <\/p>\n\n\n\n<p>Professionals may also prefer this DevTool because it supports 27 programming languages and provides synchronized views and edits.<\/p>\n\n\n\n<h3 id=\"django\" class=\"wp-block-heading\"><strong>Django<\/strong><\/h3>\n\n\n\n<p>Django is a Python framework that web developers can use on complex and popular websites and applications. This program is scalable and secure, and professionals can use it for small-scale projects or large web development projects. It helps create sites with less code, which can make the testing and revision process more efficient. <\/p>\n\n\n\n<p>Users may also enjoy a variety of Django\u2019s utilities and packages that focus on creating a straightforward design and optimizing development.<\/p>\n\n\n\n<h3 id=\"rest-assured\" class=\"wp-block-heading\"><strong>REST Assured<\/strong><\/h3>\n\n\n\n<p>REST Assured may benefit web developers who work with Java because they can use it without HTTP expertise, and it allows users to validate and test code using simple programming languages. By automating elements of the boilerplate code, REST Assured can save professionals time. <\/p>\n\n\n\n<p>It also allows individuals to use notifications, such as given, when, and then, to simplify the testing process and send and receive requests and responses.<\/p>\n\n\n\n<h3 id=\"meteor\" class=\"wp-block-heading\"><strong>Meteor<\/strong><\/h3>\n\n\n\n<p>Meteor is a full-stack open-source framework that allows web developers to deploy and maintain desktop, web and mobile applications. It can easily integrate with a professional\u2019s tech-stack, allowing users to devote their time to building and testing rather than identifying tools that can operate together. It can also provide professionals with application metrics in real-time allowing web developers to track the performance of their project and identify any issues that may require testing.<\/p>\n\n\n\n<h3 id=\"vim\" class=\"wp-block-heading\"><strong>Vim<\/strong><\/h3>\n\n\n\n<p>Vim is a highly configurable code editor that professionals can also use to revise other content, including blog posts and emails. It provides users with over 200 syntax files and integrations with Python and TCL. <\/p>\n\n\n\n<p>It may require more time to understand than other options, but users may prefer it because it allows them to develop the ideal programming environment.<\/p>\n\n\n\n<h3 id=\"ruby-on-rails\" class=\"wp-block-heading\"><strong>Ruby on Rails<\/strong><\/h3>\n\n\n\n<p>Ruby on Rails is a DevTool that may make it easy for users to read, write, maintain, test and deploy code, which means web developers may find it helpful for a variety of projects. It can also integrate with third-party applications and provide users with a straightforward design language. <\/p>\n\n\n\n<p>It may be useful for web developers who work independently rather than with a team of professionals because its intuitive workflow design can help them launch projects and make changes efficiently.<\/p>\n\n\n\n<h3 id=\"atom\" class=\"wp-block-heading\"><strong>Atom<\/strong><\/h3>\n\n\n\n<p>Atom is a text editing DevTool that offers users a variety of customizable features that allow them to make the program meet their unique project testing requirements. Professionals can choose from thousands of Atom\u2019s open-source packages and may use this tool with Linux, Mac, and Windows. <\/p>\n\n\n\n<p>It can also help individuals who are members of a professional team, as it provides users with several real-time collaboration tools to help professionals work alongside each other on a project.<\/p>\n\n\n\n<h3 id=\"ember\" class=\"wp-block-heading\"><strong>Ember<\/strong><\/h3>\n\n\n\n<p>Ember is an open-source JavaScript tool and web framework with a user experience that professionals may prefer compared to other DevTools. The built-in development features include auto-reload, test runners and efficient rebuilds. <\/p>\n\n\n\n<p>It also allows users to create asynchronous relationships and may be ideal for remote work because it can keep models up to date across the platform.<\/p>\n\n\n\n<h3 id=\"foundation\" class=\"wp-block-heading\"><strong>Foundation<\/strong><\/h3>\n\n\n\n<p>Foundation is a front-end framework and DevTool that provides users with HTML, CSS and JavaScript templates to create and maintain code for websites and applications. This tool may be accessible to web developers with various levels of experience and training, and professionals can use it on a variety of devices. <\/p>\n\n\n\n<p>Users can also use it to create HTML code for emails that viewers can access on various platforms.<\/p>\n\n\n\n<h3 id=\"hoppscotch\" class=\"wp-block-heading\"><strong>HoppScotch<\/strong><\/h3>\n\n\n\n<p>HoppScotch is an open-source web development tool with an appealing aesthetic design that professionals may prefer because of its advanced functionality. It can handle a variety of tasks, including creating full-duplex communication channels and adding translations for users with preferred languages other than English. <\/p>\n\n\n\n<p>It also provides users with collections to help them organize API requests and the ability to request and restore edits with a single click.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-how-to-open-devtools-in-your-browser\"><span id=\"how-to-open-devtools-in-your-browser\"><strong>How to open DevTools in your browser<\/strong><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-microsoft-edge\"><span id=\"microsoft-edge\"><strong>Microsoft Edge<\/strong><\/span><\/h3>\n\n\n\n<p>In Microsoft Edge, you can open DevTools by using the mouse or keyboard, in any of the following ways. Which tool is opened depends on how you open DevTools.<\/p>\n\n\n\n<p><strong>Main ways:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Action<\/th><th>Resulting tool<\/th><\/tr><\/thead><tbody><tr><td>Right-click any item on a webpage, and then select\u00a0<strong>Inspect<\/strong>.<\/td><td>The\u00a0<strong>Elements<\/strong>\u00a0tool, with the DOM tree expanded to show the right-clicked page element.<\/td><\/tr><tr><td>Press\u00a0<strong>Ctrl+Shift+I<\/strong>\u00a0(Windows, Linux) or\u00a0<strong>Command+Option+I<\/strong>\u00a0(macOS).<\/td><td>The previously used tool, or the\u00a0<strong>Welcome<\/strong>\u00a0tool.<\/td><\/tr><tr><td>Press\u00a0<strong>F12<\/strong>.<\/td><td>The previously used tool, or the\u00a0<strong>Welcome<\/strong>\u00a0tool.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><strong>Additional ways:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Action<\/th><th>Resulting tool<\/th><\/tr><\/thead><tbody><tr><td>On the Microsoft Edge toolbar, select\u00a0<strong>Settings and more<\/strong>\u00a0(<img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/learn.microsoft.com\/en-us\/microsoft-edge\/devtools-guide-chromium\/overview-images\/edge-settings-and-more-icon.png?w=1200&ssl=1\" alt=\"The 'Settings and more' icon\">) >\u00a0<strong>More tools<\/strong>\u00a0>\u00a0<strong>Developer tools<\/strong>.<\/td><td>The previously used tool, or the\u00a0<strong>Welcome<\/strong>\u00a0tool.<\/td><\/tr><tr><td>Press\u00a0<strong>Ctrl+Shift+J<\/strong>\u00a0(Windows, Linux) or\u00a0<strong>Command+Option+J<\/strong>\u00a0(macOS).<\/td><td>The\u00a0<strong>Console<\/strong>\u00a0tool.<\/td><\/tr><tr><td>Press\u00a0<strong>Ctrl+Shift+C<\/strong>\u00a0(Windows, Linux) or\u00a0<strong>Command+Option+C<\/strong>\u00a0(macOS).<\/td><td>The\u00a0<strong>Elements<\/strong>\u00a0tool, with the DOM tree expanded to show the\u00a0<code><body><\/code>\u00a0element.<\/td><\/tr><tr><td>Press\u00a0<strong>Shift+F10<\/strong>\u00a0to open the right-click menu. To select the\u00a0<strong>Inspect<\/strong>\u00a0command, press\u00a0<strong>Up Arrow<\/strong>\u00a0and then\u00a0<strong>Enter<\/strong>.<\/td><td>The\u00a0<strong>Elements<\/strong>\u00a0tool, with the DOM tree expanded to show the\u00a0<code><html><\/code>\u00a0element.<\/td><\/tr><tr><td>Press\u00a0<strong>Tab<\/strong>\u00a0or\u00a0<strong>Shift+Tab<\/strong>\u00a0to put focus on a page element. Then press\u00a0<strong>Shift+F10<\/strong>\u00a0to open the right-click menu. To select the\u00a0<strong>Inspect<\/strong>\u00a0command, press\u00a0<strong>Up Arrow<\/strong>\u00a0and then\u00a0<strong>Enter<\/strong>.<\/td><td>The\u00a0<strong>Elements<\/strong>\u00a0tool, with the DOM tree expanded to show the focused page element.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-chrome\"><span id=\"chrome\"><strong>Chrome<\/strong><\/span><\/h3>\n\n\n\n<p>There are many ways to open Chrome DevTools. Choose your favorite way from this comprehensive reference.<\/p>\n\n\n\n<p>You can access DevTools using Chrome UI or keyboard:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>From\u00a0drop-down menus in Chrome.<\/li>\n\n\n\n<li>With dedicated\u00a0shortcuts\u00a0that open\u00a0<strong>Elements<\/strong>,\u00a0<strong>Console<\/strong>, or the last panel you used.<\/li>\n<\/ul>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"inspect\"><span id=\"open-the-elements-panel-to-inspect-the-dom-or-css\"><strong>Open the Elements panel to inspect the DOM or CSS<\/strong><\/span><\/h5>\n\n\n\n<p>To inspect, right-click an element on a page and select\u00a0<strong>Inspect<\/strong>. DevTools opens the <strong>Elements<\/strong> panel and selects the element in the DOM tree. In the\u00a0<strong>Styles<\/strong>\u00a0pane, you can see CSS rules applied to the selected element.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"600\" src=\"https:\/\/i0.wp.com\/businessyield.com\/tech\/wp-content\/uploads\/sites\/2\/2023\/11\/image-4-1024x600.png?resize=1024%2C600&ssl=1\" alt=\"\" class=\"wp-image-15723\" srcset=\"https:\/\/i0.wp.com\/businessyield.com\/tech\/wp-content\/uploads\/sites\/2\/2023\/11\/image-4.png?resize=1024%2C600&ssl=1 1024w, https:\/\/i0.wp.com\/businessyield.com\/tech\/wp-content\/uploads\/sites\/2\/2023\/11\/image-4.png?resize=300%2C176&ssl=1 300w, https:\/\/i0.wp.com\/businessyield.com\/tech\/wp-content\/uploads\/sites\/2\/2023\/11\/image-4.png?resize=768%2C450&ssl=1 768w, https:\/\/i0.wp.com\/businessyield.com\/tech\/wp-content\/uploads\/sites\/2\/2023\/11\/image-4.png?resize=1536%2C900&ssl=1 1536w, https:\/\/i0.wp.com\/businessyield.com\/tech\/wp-content\/uploads\/sites\/2\/2023\/11\/image-4.png?resize=380%2C223&ssl=1 380w, https:\/\/i0.wp.com\/businessyield.com\/tech\/wp-content\/uploads\/sites\/2\/2023\/11\/image-4.png?resize=800%2C469&ssl=1 800w, https:\/\/i0.wp.com\/businessyield.com\/tech\/wp-content\/uploads\/sites\/2\/2023\/11\/image-4.png?resize=1160%2C680&ssl=1 1160w, https:\/\/i0.wp.com\/businessyield.com\/tech\/wp-content\/uploads\/sites\/2\/2023\/11\/image-4.png?w=1600&ssl=1 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"last\"><span id=\"open-the-last-panel-you-used-from-chromes-main-menu\"><strong>Open the last panel you used from Chrome\u2019s main menu<\/strong><\/span><\/h5>\n\n\n\n<p>To open the last DevTools panel, click the\u00a0<img loading=\"lazy\" decoding=\"async\" width=\"22\" height=\"22\" src=\"https:\/\/wd.imgix.net\/image\/NJdAV9UgKuN8AhoaPBquL7giZQo1\/N7wEDmtW9lnrSxPRupMa.svg\" alt=\"Three-dot menu.\">\u00a0button to the right of the address bar and select\u00a0<strong>More Tools<\/strong>\u00a0>\u00a0<strong>Developer Tools<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/wd.imgix.net\/image\/NJdAV9UgKuN8AhoaPBquL7giZQo1\/bkh79zEFaByczisr3lD5.png?w=1200&ssl=1\" alt=\"The Developer Tools option selected from the three-dot menu.\" \/><\/figure>\n\n\n\n<p>Alternatively, you can open the last panel with a shortcut. See the next section to learn more.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"shortcuts\"><span id=\"open-panels-with-shortcuts-elements-console-or-your-last-panel\"><strong>Open panels with shortcuts: Elements, Console, or your last panel<\/strong><\/span><\/h5>\n\n\n\n<p>If you prefer a keyboard, press a shortcut in Chrome depending on your operating system:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>OS<\/th><th>Elements<\/th><th>Console<\/th><th>Your last panel<\/th><\/tr><\/thead><tbody><tr><td>Windows or Linux<\/td><td><kbd>Ctrl<\/kbd>\u00a0+\u00a0<kbd>Shift<\/kbd>\u00a0+\u00a0<strong>C<\/strong><\/td><td><kbd>Ctrl<\/kbd>\u00a0+\u00a0<kbd>Shift<\/kbd>\u00a0+\u00a0<strong>J<\/strong><\/td><td><kbd>F12<\/kbd><br><kbd>Ctrl<\/kbd>\u00a0+\u00a0<kbd>Shift<\/kbd>\u00a0+\u00a0<strong>I<\/strong><\/td><\/tr><tr><td>Mac<\/td><td><kbd>Cmd<\/kbd>\u00a0+\u00a0<kbd>Option<\/kbd>\u00a0+\u00a0<strong>C<\/strong><\/td><td><kbd>Cmd<\/kbd>\u00a0+\u00a0<kbd>Option<\/kbd>\u00a0+\u00a0<strong>J<\/strong><\/td><td><kbd>Fn<\/kbd>\u00a0+\u00a0<kbd>F12<\/kbd><br><kbd>Cmd<\/kbd>\u00a0+\u00a0<kbd>Option<\/kbd>\u00a0+\u00a0<strong>I<\/strong><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Here\u2019s an easy way to memorize the shortcuts:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>C<\/strong>\u00a0stands for CSS.<\/li>\n\n\n\n<li><strong>J<\/strong>\u00a0for JavaScript.<\/li>\n\n\n\n<li><strong>I<\/strong>\u00a0designates your choice.<\/li>\n<\/ul>\n\n\n\n<p>The\u00a0<strong>C<\/strong>\u00a0shortcut opens the\u00a0<strong>Elements<\/strong>\u00a0panel in\u00a0<img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"21\" height=\"20\" src=\"https:\/\/i0.wp.com\/wd.imgix.net\/image\/NJdAV9UgKuN8AhoaPBquL7giZQo1\/7s3JQLXmIQmQa4CFXaNv.png?resize=21%2C20&ssl=1\" alt=\"Inspect.\">\u00a0inspector mode. This mode shows you helpful tooltips when you hover over elements on a page. You can also click any element to view its CSS in the\u00a0<strong>Elements<\/strong>\u00a0>\u00a0<strong>Styles<\/strong>\u00a0pane.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/wd.imgix.net\/image\/NJdAV9UgKuN8AhoaPBquL7giZQo1\/j55nQO3vIZKKlu59ID15.png?w=1200&ssl=1\" alt=\"The Elements panel in inspector mode with a tooltip.\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-mozilla-firefox\"><span id=\"mozilla-firefox\"><strong>Mozilla Firefox<\/strong><\/span><\/h3>\n\n\n\n<p>To open the developer tools in Mozilla Firefox:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open the browser.<\/li>\n\n\n\n<li>Press\u00a0<code>F12<\/code>\u00a0on the keyboard.\n<ul class=\"wp-block-list\">\n<li>Optional: Press the\u00a0<code>Ctrl+Shift+I<\/code>\u00a0keys or click\u00a0<strong>Menu<\/strong>\u00a0>\u00a0<strong>Web Development<\/strong>\u00a0>\u00a0<strong>Inspector<\/strong>.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p>You can open the developer tools by inspecting the element:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open the browser<\/li>\n\n\n\n<li>Right-click on the element to inspect.<\/li>\n\n\n\n<li>Choose the option\u00a0<strong>Inspect<\/strong>\u00a0or\u00a0<strong>Inspect element<\/strong>.<\/li>\n\n\n\n<li>Optional: In the developer tools window, switch to the\u00a0<strong>Elements<\/strong>\u00a0panel.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-internet-explorer\"><span id=\"internet-explorer\"><strong>Internet Explorer<\/strong><\/span><\/h3>\n\n\n\n<p>To open the developer tools in Internet Explorer:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open the browser.<\/li>\n\n\n\n<li>Press\u00a0<code>F12<\/code>\u00a0on the keyboard.\n<ul class=\"wp-block-list\">\n<li>Optional: Click\u00a0<strong>Tools<\/strong>\u00a0>\u00a0<strong>F12 Developer Tools<\/strong>.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p>You can open the developer tools by inspecting the element:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open the browser<\/li>\n\n\n\n<li>Right-click on the element to inspect.<\/li>\n\n\n\n<li>Choose the option\u00a0<strong>Inspect<\/strong>\u00a0or\u00a0<strong>Inspect element<\/strong>.<\/li>\n\n\n\n<li>Optional: In the developer tools window, switch to the\u00a0<strong>Elements<\/strong>\u00a0panel.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-useful-devtools-tips-and-tricks\"><span id=\"useful-devtools-tips-and-tricks\"><strong>Useful DevTools tips and tricks<\/strong><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"3-disable-abusive-debugger-statements\"><span id=\"disable-abusive-debugger-statements\"><strong>Disable abusive debugger statements<\/strong><\/span><\/h3>\n\n\n\n<p>Some websites aren\u2019t very nice to web developers. While they seem normal at first, as soon as you open DevTools, they immediately get stuck and pause at a JavaScript breakpoint, making it very hard to inspect the page.<\/p>\n\n\n\n<p>These websites achieve this by adding a\u00a0<code>debugger<\/code>\u00a0statement in their code. This statement has no effect as long as DevTools is closed, but as soon as you open it, DevTools pauses the website\u2019s main thread.<\/p>\n\n\n\n<p>If you ever find yourself in this situation, here is a way to get around it:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open the\u00a0<strong>Sources<\/strong>\u00a0tool (called\u00a0<strong>Debugger<\/strong>\u00a0in Firefox).<\/li>\n\n\n\n<li>Find the line where the debugger statement is. That shouldn\u2019t be hard since the debugger is currently paused there, so it should be visible right away.<\/li>\n\n\n\n<li>Right-click on the line number next to this line.<\/li>\n\n\n\n<li>In the context menu, choose\u00a0<strong>Never pause here<\/strong>.<\/li>\n\n\n\n<li>Refresh the page.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/i0.wp.com\/files.smashing.media\/articles\/popular-devtools-tips\/11-disable-abusive-debugger-statements.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto%2Cq_80\/w_400\/https%3A\/\/files.smashing.media\/articles\/popular-devtools-tips\/11-disable-abusive-debugger-statements.png?w=1200&ssl=1\" alt=\"A screenshot of how to disable abusive debugger statements\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"4-visualize-a-page-in-3d\"><span id=\"visualize-a-page-in-3d\"><strong>Visualize a page in 3D<\/strong><\/span><\/h2>\n\n\n\n<p>The HTML and CSS code we write to create webpages gets parsed, interpreted, and transformed by the browser, which turns it into various tree-like data structures like the DOM, compositing layers, or the stacking context tree.<\/p>\n\n\n\n<p>While these data structures are mostly internal in-memory representations of a running webpage, it can sometimes be helpful to explore them and make sure things work as intended.<\/p>\n\n\n\n<p>A three-dimensional representation of these structures can help see things in a way that other representations can\u2019t. Plus, let\u2019s admit it, it\u2019s cool!<\/p>\n\n\n\n<p>Edge is the only browser that provides a tool dedicated to visualizing webpages in 3D in a variety of ways.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>The easiest way to open it is by using the\u00a0<strong>Command Menu<\/strong>. Press\u00a0<kbd>Ctrl<\/kbd>+<kbd>Shift<\/kbd>+<kbd>P<\/kbd>\u00a0(or\u00a0<kbd>Cmd<\/kbd>+<kbd>Shift<\/kbd>+<kbd>P<\/kbd>\u00a0on macOS), type \u201c3D\u201d and then press\u00a0<kbd>Enter<\/kbd>.<\/li>\n\n\n\n<li>In the\u00a0<strong>3D View<\/strong>\u00a0tool, choose between the three different modes:\u00a0<strong>Z-Index<\/strong>,\u00a0<strong>DOM<\/strong>, and\u00a0<strong>Composited Layers<\/strong>.<\/li>\n\n\n\n<li>Use your mouse cursor to pan, rotate, or zoom the 3D scene.<\/li>\n<\/ol>\n\n\n\n<p>The\u00a0<strong>Z-Index<\/strong>\u00a0mode can be helpful to know which elements are stacking contexts and which are positioned on the z-axis.<\/p>\n\n\n\n<p>The\u00a0<strong>DOM<\/strong>\u00a0mode can be used to easily see how deep your DOM tree is or find elements that are\u00a0outside of the viewport.<\/p>\n\n\n\n<p>The\u00a0<strong>Composited Layers<\/strong>\u00a0mode shows all the different layers the browser rendering engine creates to paint the page as quickly as possible.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"2-edit-and-resend-network-requests\"><span id=\"edit-resend-network-requests\"><strong>Edit & resend network requests<\/strong><\/span><\/h3>\n\n\n\n<p>When working on your server-side logic or API, it may be useful to send a request over and over again without having to reload the entire client-side webpage and interact with it each time. Sometimes you just need to tweak a couple of request parameters to test something.<\/p>\n\n\n\n<p>One of the easiest ways to do this is by using Edge\u2019s\u00a0<strong>Network Console<\/strong>\u00a0tool or Firefox\u2019s\u00a0<strong>Edit and Resend<\/strong>\u00a0feature of the\u00a0<strong>Network<\/strong>\u00a0tool. Both of them allow you to start from an existing request, modify it, and resend it.<\/p>\n\n\n\n<p>In Firefox:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Open the\u00a0<strong>Network<\/strong>\u00a0tool.<\/li>\n\n\n\n<li>Right-click the network request you want to edit and then click\u00a0<strong>Edit and Resend<\/strong>.<\/li>\n\n\n\n<li>A new sidebar panel opens up, which lets you change things like the URL, the method, the request parameters, and even the body.<\/li>\n\n\n\n<li>Change anything you need and click\u00a0<strong>Send<\/strong>.<\/li>\n<\/ul>\n\n\n\n<p>In Edge:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>First, enable the\u00a0<strong>Network Console<\/strong>\u00a0tool by going into the\u00a0<strong>Settings<\/strong>\u00a0panel (press\u00a0<kbd>F1<\/kbd>) \u2192\u00a0<strong>Experiments<\/strong>\u00a0\u2192\u00a0<strong>Enable Network Console<\/strong>.<\/li>\n\n\n\n<li>Then, in the\u00a0<strong>Network<\/strong>\u00a0tool, find the request you want to edit, right-click it and then click\u00a0<strong>Edit and Resend<\/strong>.<\/li>\n\n\n\n<li>The\u00a0<strong>Network Console<\/strong>\u00a0tool appears, which lets you change the request just like in Firefox.<\/li>\n\n\n\n<li>Make the changes you need, and then click\u00a0<strong>Send<\/strong>.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"6-copy-element-styles\"><span id=\"copy-element-styles\"><strong>Copy Element styles\u00a0<\/strong><\/span><\/h2>\n\n\n\n<p>Sometimes it\u2019s useful to extract a single element from a webpage, maybe to test it in isolation. To do this, you\u2019ll first need to extract the element\u2019s HTML code via the\u00a0<strong>Elements<\/strong>\u00a0tool by right-clicking the element and choosing\u00a0<strong>Copy<\/strong>\u00a0\u2192\u00a0<strong>Copy outer HTML<\/strong>.<\/p>\n\n\n\n<p>Extracting the element\u2019s styles, however, is a bit more difficult as it involves going over all of the CSS rules that apply to the element.<\/p>\n\n\n\n<p>Chrome, Edge, and other Chromium-based browsers make this step a lot faster:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>In the\u00a0<strong>Elements<\/strong>\u00a0tool, select the element you want to copy styles from.<\/li>\n\n\n\n<li>Right-click the selected element.<\/li>\n\n\n\n<li>Click\u00a0<strong>Copy<\/strong>\u00a0\u2192\u00a0<strong>Copy styles<\/strong>.<\/li>\n\n\n\n<li>Paste the result in your text editor.<\/li>\n<\/ol>\n\n\n\n<p>You now have all the styles that apply to this element, including inherited styles and custom properties, in a single list.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"7-view-console-logs-on-non-safari-browsers-on-ios\"><span id=\"view-console-logs-on-non-safari-browsers-on-ios\"><strong>View console logs on non-Safari browsers on IOS\u00a0<\/strong><\/span><\/h3>\n\n\n\n<p>As you might know, Safari isn\u2019t the only browser you can install and use on an iOS device. Firefox, Chrome, Edge, and others can also be used. Technically, they all run on the same underlying browser rendering engine, WebKit, so a website should more or less look the same in all of these browsers in iOS.<\/p>\n\n\n\n<p>However, it\u2019s possible to have bugs on other browsers that don\u2019t replicate in Safari. This can be quite tricky to investigate. While it\u2019s possible to debug Safari on an iOS device by attaching the device to a Mac with a USB cable, it\u2019s impossible to debug non-Safari browsers.<\/p>\n\n\n\n<p>Thankfully, there is a way to at least see your console logs in Chrome and Edge (and possibly other Chromium-based browsers) when using iOS:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open Chrome or Edge on your iOS device and go to the special\u00a0<strong><code>about:inspect<\/code><\/strong>\u00a0page.<\/li>\n\n\n\n<li>Click\u00a0<strong>Start Logging<\/strong>.<\/li>\n\n\n\n<li>Keep this tab open and then open another one.<\/li>\n\n\n\n<li>In the new tab, go to the page you\u2019re trying to debug.<\/li>\n\n\n\n<li>Return to the previous tab. Your console logs should now be displayed.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-recommended-articles\"><span id=\"recommended-articles\"><strong>Recommended Articles <\/strong><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/businessyield.com\/tech\/terms\/python-selenium-everything-you-need-to-know\/\">Python Selenium: Everything You Need To Know<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/businessyield.com\/tech\/technology\/lift-and-shift\/\">What Is Lift and Shift in Cloud Migration: All You Should Know<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/businessyield.com\/tech\/technology\/how-to-learn-javascript\/\">How to Learn JavaScript Effectively: Proven Tips & Tricks<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/businessyield.com\/tech\/technology\/on-premises-vs-cloud-computing-whats-the-difference\/\">On-Premises vs Cloud Computing: What\u2019s The Difference?<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/businessyield.com\/tech\/technology\/data-normalization\/\">Data Normalization: What It Is and Why It Is Important<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/businessyield.com\/tech\/technology\/python-cryptography\/\">Python Cryptography: Ultimate Beginners Guide<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-references\"><span id=\"references\"><strong>References<\/strong><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"http:\/\/www.ibm.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">IBM<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.indeed.com\/career-advice\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Indeed<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.microsoft.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Microsoft<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.smashingmagazine.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Smashing Magazine<\/a><\/li>\n<\/ul>\n","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"excerpt":{"rendered":"Every modern web browser includes a powerful suite of developer tools, also known as DevTools. These tools do&hellip;\n","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"author":290,"featured_media":15727,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[35],"tags":[],"class_list":{"0":"post-15718","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-technology"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>DevTools: Everything You Need To Know - Business Yield Technology<\/title>\n<meta name=\"description\" content=\"DevTools do a range of things, from inspecting currently-loaded HTML, CSS and JavaScript to showing which assets the page has requested.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/businessyield.com\/tech\/technology\/devtools-everything-you-need-to-know\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"DevTools: Everything You Need To Know - Business Yield Technology\" \/>\n<meta property=\"og:description\" content=\"DevTools do a range of things, from inspecting currently-loaded HTML, CSS and JavaScript to showing which assets the page has requested.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/businessyield.com\/tech\/technology\/devtools-everything-you-need-to-know\/\" \/>\n<meta property=\"og:site_name\" content=\"Business Yield Technology\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/Jay.Arnis\" \/>\n<meta property=\"article:published_time\" content=\"2023-11-27T17:30:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-27T17:30:36+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/businessyield.com\/tech\/wp-content\/uploads\/sites\/2\/2023\/11\/Untitled-design-19.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"667\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jimmy Anisulowo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/forlahjay\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jimmy Anisulowo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/businessyield.com\\\/tech\\\/technology\\\/devtools-everything-you-need-to-know\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/businessyield.com\\\/tech\\\/technology\\\/devtools-everything-you-need-to-know\\\/\"},\"author\":{\"name\":\"Jimmy Anisulowo\",\"@id\":\"https:\\\/\\\/businessyield.com\\\/tech\\\/#\\\/schema\\\/person\\\/0f5b3b62b69726a967e6d217a4d242ff\"},\"headline\":\"DevTools: Everything You Need To Know\",\"datePublished\":\"2023-11-27T17:30:34+00:00\",\"dateModified\":\"2023-11-27T17:30:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/businessyield.com\\\/tech\\\/technology\\\/devtools-everything-you-need-to-know\\\/\"},\"wordCount\":2779,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/businessyield.com\\\/tech\\\/technology\\\/devtools-everything-you-need-to-know\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/businessyield.com\\\/tech\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/2023\\\/11\\\/Untitled-design-19.jpg?fit=1000%2C667&ssl=1\",\"articleSection\":[\"Technology\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/businessyield.com\\\/tech\\\/technology\\\/devtools-everything-you-need-to-know\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/businessyield.com\\\/tech\\\/technology\\\/devtools-everything-you-need-to-know\\\/\",\"url\":\"https:\\\/\\\/businessyield.com\\\/tech\\\/technology\\\/devtools-everything-you-need-to-know\\\/\",\"name\":\"DevTools: Everything You Need To Know - Business Yield Technology\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/businessyield.com\\\/tech\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/businessyield.com\\\/tech\\\/technology\\\/devtools-everything-you-need-to-know\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/businessyield.com\\\/tech\\\/technology\\\/devtools-everything-you-need-to-know\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/businessyield.com\\\/tech\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/2023\\\/11\\\/Untitled-design-19.jpg?fit=1000%2C667&ssl=1\",\"datePublished\":\"2023-11-27T17:30:34+00:00\",\"dateModified\":\"2023-11-27T17:30:36+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/businessyield.com\\\/tech\\\/#\\\/schema\\\/person\\\/0f5b3b62b69726a967e6d217a4d242ff\"},\"description\":\"DevTools do a range of things, from inspecting currently-loaded HTML, CSS and JavaScript to showing which assets the page has requested.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/businessyield.com\\\/tech\\\/technology\\\/devtools-everything-you-need-to-know\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/businessyield.com\\\/tech\\\/technology\\\/devtools-everything-you-need-to-know\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/businessyield.com\\\/tech\\\/technology\\\/devtools-everything-you-need-to-know\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/businessyield.com\\\/tech\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/2023\\\/11\\\/Untitled-design-19.jpg?fit=1000%2C667&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/businessyield.com\\\/tech\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/2023\\\/11\\\/Untitled-design-19.jpg?fit=1000%2C667&ssl=1\",\"width\":1000,\"height\":667,\"caption\":\"Image by Freepik\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/businessyield.com\\\/tech\\\/technology\\\/devtools-everything-you-need-to-know\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/businessyield.com\\\/tech\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"DevTools: Everything You Need To Know\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/businessyield.com\\\/tech\\\/#website\",\"url\":\"https:\\\/\\\/businessyield.com\\\/tech\\\/\",\"name\":\"Business Yield Technology\",\"description\":\"Best Tech Reviews, Apps, Phones, &amp; Gaming\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/businessyield.com\\\/tech\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/businessyield.com\\\/tech\\\/#\\\/schema\\\/person\\\/0f5b3b62b69726a967e6d217a4d242ff\",\"name\":\"Jimmy Anisulowo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b20d2d093f1362590dc5b5f8b8cfb36e53decf98e57d0121be53eb533dc1f2a7?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b20d2d093f1362590dc5b5f8b8cfb36e53decf98e57d0121be53eb533dc1f2a7?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b20d2d093f1362590dc5b5f8b8cfb36e53decf98e57d0121be53eb533dc1f2a7?s=96&d=mm&r=g\",\"caption\":\"Jimmy Anisulowo\"},\"description\":\"Jimmy generally lives his life by one dogma: steady improvement. This has taken him on a relentless pursuit of knowledge in diverse fields such as business, tech, insurance, health and many others. With a background in content creation and digital marketing plus over ten years of writing and research experience, he implements an expert's view to help his audiences gain valuable insight. He is also an avid reader, gamer, drummer, full-blown metalhead, and all-round fun gi.\",\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/Jay.Arnis\",\"https:\\\/\\\/www.instagram.com\\\/forlahjay\\\/\",\"https:\\\/\\\/x.com\\\/https:\\\/\\\/twitter.com\\\/forlahjay\"],\"url\":\"https:\\\/\\\/businessyield.com\\\/tech\\\/author\\\/jimmy\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"DevTools: Everything You Need To Know - Business Yield Technology","description":"DevTools do a range of things, from inspecting currently-loaded HTML, CSS and JavaScript to showing which assets the page has requested.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/businessyield.com\/tech\/technology\/devtools-everything-you-need-to-know\/","og_locale":"en_US","og_type":"article","og_title":"DevTools: Everything You Need To Know - Business Yield Technology","og_description":"DevTools do a range of things, from inspecting currently-loaded HTML, CSS and JavaScript to showing which assets the page has requested.","og_url":"https:\/\/businessyield.com\/tech\/technology\/devtools-everything-you-need-to-know\/","og_site_name":"Business Yield Technology","article_author":"https:\/\/www.facebook.com\/Jay.Arnis","article_published_time":"2023-11-27T17:30:34+00:00","article_modified_time":"2023-11-27T17:30:36+00:00","og_image":[{"width":1000,"height":667,"url":"http:\/\/businessyield.com\/tech\/wp-content\/uploads\/sites\/2\/2023\/11\/Untitled-design-19.jpg","type":"image\/jpeg"}],"author":"Jimmy Anisulowo","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/forlahjay","twitter_misc":{"Written by":"Jimmy Anisulowo","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/businessyield.com\/tech\/technology\/devtools-everything-you-need-to-know\/#article","isPartOf":{"@id":"https:\/\/businessyield.com\/tech\/technology\/devtools-everything-you-need-to-know\/"},"author":{"name":"Jimmy Anisulowo","@id":"https:\/\/businessyield.com\/tech\/#\/schema\/person\/0f5b3b62b69726a967e6d217a4d242ff"},"headline":"DevTools: Everything You Need To Know","datePublished":"2023-11-27T17:30:34+00:00","dateModified":"2023-11-27T17:30:36+00:00","mainEntityOfPage":{"@id":"https:\/\/businessyield.com\/tech\/technology\/devtools-everything-you-need-to-know\/"},"wordCount":2779,"commentCount":0,"image":{"@id":"https:\/\/businessyield.com\/tech\/technology\/devtools-everything-you-need-to-know\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/businessyield.com\/tech\/wp-content\/uploads\/sites\/2\/2023\/11\/Untitled-design-19.jpg?fit=1000%2C667&ssl=1","articleSection":["Technology"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/businessyield.com\/tech\/technology\/devtools-everything-you-need-to-know\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/businessyield.com\/tech\/technology\/devtools-everything-you-need-to-know\/","url":"https:\/\/businessyield.com\/tech\/technology\/devtools-everything-you-need-to-know\/","name":"DevTools: Everything You Need To Know - Business Yield Technology","isPartOf":{"@id":"https:\/\/businessyield.com\/tech\/#website"},"primaryImageOfPage":{"@id":"https:\/\/businessyield.com\/tech\/technology\/devtools-everything-you-need-to-know\/#primaryimage"},"image":{"@id":"https:\/\/businessyield.com\/tech\/technology\/devtools-everything-you-need-to-know\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/businessyield.com\/tech\/wp-content\/uploads\/sites\/2\/2023\/11\/Untitled-design-19.jpg?fit=1000%2C667&ssl=1","datePublished":"2023-11-27T17:30:34+00:00","dateModified":"2023-11-27T17:30:36+00:00","author":{"@id":"https:\/\/businessyield.com\/tech\/#\/schema\/person\/0f5b3b62b69726a967e6d217a4d242ff"},"description":"DevTools do a range of things, from inspecting currently-loaded HTML, CSS and JavaScript to showing which assets the page has requested.","breadcrumb":{"@id":"https:\/\/businessyield.com\/tech\/technology\/devtools-everything-you-need-to-know\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/businessyield.com\/tech\/technology\/devtools-everything-you-need-to-know\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/businessyield.com\/tech\/technology\/devtools-everything-you-need-to-know\/#primaryimage","url":"https:\/\/i0.wp.com\/businessyield.com\/tech\/wp-content\/uploads\/sites\/2\/2023\/11\/Untitled-design-19.jpg?fit=1000%2C667&ssl=1","contentUrl":"https:\/\/i0.wp.com\/businessyield.com\/tech\/wp-content\/uploads\/sites\/2\/2023\/11\/Untitled-design-19.jpg?fit=1000%2C667&ssl=1","width":1000,"height":667,"caption":"Image by Freepik"},{"@type":"BreadcrumbList","@id":"https:\/\/businessyield.com\/tech\/technology\/devtools-everything-you-need-to-know\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/businessyield.com\/tech\/"},{"@type":"ListItem","position":2,"name":"DevTools: Everything You Need To Know"}]},{"@type":"WebSite","@id":"https:\/\/businessyield.com\/tech\/#website","url":"https:\/\/businessyield.com\/tech\/","name":"Business Yield Technology","description":"Best Tech Reviews, Apps, Phones, &amp; Gaming","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/businessyield.com\/tech\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/businessyield.com\/tech\/#\/schema\/person\/0f5b3b62b69726a967e6d217a4d242ff","name":"Jimmy Anisulowo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/b20d2d093f1362590dc5b5f8b8cfb36e53decf98e57d0121be53eb533dc1f2a7?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/b20d2d093f1362590dc5b5f8b8cfb36e53decf98e57d0121be53eb533dc1f2a7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b20d2d093f1362590dc5b5f8b8cfb36e53decf98e57d0121be53eb533dc1f2a7?s=96&d=mm&r=g","caption":"Jimmy Anisulowo"},"description":"Jimmy generally lives his life by one dogma: steady improvement. This has taken him on a relentless pursuit of knowledge in diverse fields such as business, tech, insurance, health and many others. With a background in content creation and digital marketing plus over ten years of writing and research experience, he implements an expert's view to help his audiences gain valuable insight. He is also an avid reader, gamer, drummer, full-blown metalhead, and all-round fun gi.","sameAs":["https:\/\/www.facebook.com\/Jay.Arnis","https:\/\/www.instagram.com\/forlahjay\/","https:\/\/x.com\/https:\/\/twitter.com\/forlahjay"],"url":"https:\/\/businessyield.com\/tech\/author\/jimmy\/"}]}},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/businessyield.com\/tech\/wp-content\/uploads\/sites\/2\/2023\/11\/Untitled-design-19.jpg?fit=1000%2C667&ssl=1","jetpack_sharing_enabled":true,"gt_translate_keys":[{"key":"link","format":"url"}],"_links":{"self":[{"href":"https:\/\/businessyield.com\/tech\/wp-json\/wp\/v2\/posts\/15718","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/businessyield.com\/tech\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/businessyield.com\/tech\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/businessyield.com\/tech\/wp-json\/wp\/v2\/users\/290"}],"replies":[{"embeddable":true,"href":"https:\/\/businessyield.com\/tech\/wp-json\/wp\/v2\/comments?post=15718"}],"version-history":[{"count":1,"href":"https:\/\/businessyield.com\/tech\/wp-json\/wp\/v2\/posts\/15718\/revisions"}],"predecessor-version":[{"id":15728,"href":"https:\/\/businessyield.com\/tech\/wp-json\/wp\/v2\/posts\/15718\/revisions\/15728"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/businessyield.com\/tech\/wp-json\/wp\/v2\/media\/15727"}],"wp:attachment":[{"href":"https:\/\/businessyield.com\/tech\/wp-json\/wp\/v2\/media?parent=15718"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/businessyield.com\/tech\/wp-json\/wp\/v2\/categories?post=15718"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/businessyield.com\/tech\/wp-json\/wp\/v2\/tags?post=15718"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}