{"id":237066,"date":"2022-03-07T08:35:49","date_gmt":"2022-03-07T16:35:49","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/visualstudio\/?p=237066"},"modified":"2022-03-07T08:35:49","modified_gmt":"2022-03-07T16:35:49","slug":"edge-developer-tools-for-visual-studio-preview","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/visualstudio\/edge-developer-tools-for-visual-studio-preview\/","title":{"rendered":"Edge Developer Tools for Visual Studio (Preview)"},"content":{"rendered":"<p>When developing web apps, it\u2019s common to use the browser developer tools to perform various tasks like; modifying the CSS, inspecting network traffic, etc. Because the browser is disconnected from the IDE, if you make changes to the running application in the browser, you will need to remember and reapply those changes to your code as well. To make you more productive, we have partnered with the Edge Developer Tools team to start integrating their developer tools into Visual Studio for ASP.NET Core, and ASP.NET, developers. You can download and install the preview extension at <a href=\"https:\/\/aka.ms\/edgetools-for-vs\">https:\/\/aka.ms\/edgetools-for-vs<\/a>. In the current Preview release we have enabled the both the <a href=\"https:\/\/docs.microsoft.com\/en-us\/microsoft-edge\/devtools-guide-chromium\/elements-tool\/elements-tool\">Elements<\/a> and <a href=\"https:\/\/docs.microsoft.com\/en-us\/microsoft-edge\/devtools-guide-chromium\/network\/\">Network tools<\/a>. Below is an animated gif showing you the Elements tool in action.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/03\/01-elements-tool.gif\"><img decoding=\"async\" class=\"size-full wp-image-237067 aligncenter\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/03\/01-elements-tool.gif\" alt=\"elements tool\" width=\"1280\" height=\"720\" \/><\/a><\/p>\n<p><div  class=\"d-flex justify-content-center\"><a class=\"cta_button_link btn-primary mb-24\" href=\"https:\/\/aka.ms\/edgetools-for-vs\" target=\"_blank\">Download the preview extension<\/a><\/div><\/p>\n<p>&nbsp;<\/p>\n<p>You can use the Elements tool to make CSS edits more productive during development of web apps (ASP.NET Core and ASP.NET) in Visual Studio. One of my favorite things about the Elements tool is to use the visual CSS flexbox, and CSS grid, support. Take a look at the video below where I use the flexbox tools to fine tune my CSS to get the heading to appear the way that I like.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/03\/02-flex-tools-1.gif\"><img decoding=\"async\" class=\"size-full wp-image-237072 aligncenter\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/03\/02-flex-tools-1.gif\" alt=\"flex tools\" width=\"1920\" height=\"1080\" \/><\/a><\/p>\n<p>In the quick video above, you can see that I apply the display: flex property, and then the flexbox tools icon appears. From there I can change the CSS using the dev tools to get the UI to the desired look. Before this extension, I would have typically performed this in my browser, then I would have to remember the CSS changes that I made and apply them to my source code. When using the dev tools that are integrated in Visual Studio, all changes in the elements tool will be applied to the source files.<\/p>\n<p>When changes are applied from the Edge dev tools to your CSS files, the undo stack in Visual Studio will enable you to undo any changes if needed.<\/p>\n<p>You can also edit your CSS files in Visual Studio and the changes will be applied to the application being previewed. Now that we\u2019ve taken a look at the Elements tool, lets move on to the Network tool.<\/p>\n<p>&nbsp;<\/p>\n<h3>Network tools<\/h3>\n<p>In the embedded version of the Edge dev tools, you can use the following network tools.<\/p>\n<ul>\n<li>Network<\/li>\n<li>Network conditions<\/li>\n<li>Network request blocking<\/li>\n<\/ul>\n<p>You can inspect the network traffic by using the Network tool. This tab should be visible by default when you open the embedded dev tools. Take a look at the animation below.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/03\/03-network-tools.gif\"><img decoding=\"async\" class=\"size-full wp-image-237069 aligncenter\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/03\/03-network-tools.gif\" alt=\"network tools\" width=\"1920\" height=\"1080\" \/><\/a><\/p>\n<p>When you first open the Network tool, it may be empty. Just refresh the page in Visual Studio to get the requests to appear in the Network tool. From the Network tool, you can open the Network conditions, as shown in the video, to simulate different possible network conditions. By clicking on the plus button, you can see the other tools that are currently available.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/03\/edge-add-tools-button.png\"><img decoding=\"async\" class=\"size-full wp-image-237070 aligncenter\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/03\/edge-add-tools-button.png\" alt=\"edge add tools button\" width=\"538\" height=\"157\" srcset=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/03\/edge-add-tools-button.png 538w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2022\/03\/edge-add-tools-button-300x88.png 300w\" sizes=\"(max-width: 538px) 100vw, 538px\" \/><\/a><\/p>\n<p>We won\u2019t cover the Issues or Network request blocking tool here, but those are available as they are when using Microsoft Edge itself. Let\u2019s move on to the summary now.<\/p>\n<p>&nbsp;<\/p>\n<h3>Summary<\/h3>\n<p>In this post we have briefly covered the new Preview extension that is available for Visual Studio to integrate the Edge Developer Tools. We explored the Elements and Network tool as well. Please <a href=\"https:\/\/aka.ms\/edgetools-for-vs\">download<\/a> and try out this extension. For feedback, if you are reporting any bugs please use the built-in support to <a href=\"https:\/\/docs.microsoft.com\/en-us\/visualstudio\/ide\/how-to-report-a-problem-with-visual-studio?view=vs-2022\">Report a Problem<\/a>. If you have a suggestion, you can also use Report a Problem, or leave a comment below. We will be watching the comments here.<\/p>\n<p>&nbsp;<\/p>\n<p>Chris Heilmann (<a href=\"https:\/\/twitter.com\/codepo8\">@codepo8<\/a>)<\/p>\n<p>Sayed Ibrahim Hashimi (<a href=\"https:\/\/twitter.com\/sayedihashimi\">@SayedIHashimi<\/a>)<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When developing web apps, it\u2019s common to use the browser developer tools to perform various tasks like; modifying the CSS, inspecting network traffic, etc. Because the browser is disconnected from the IDE, if you make changes to the running application in the browser, you will need to remember and reapply those changes to your code [&hellip;]<\/p>\n","protected":false},"author":357,"featured_media":237097,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[155,1029],"tags":[],"class_list":["post-237066","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-visual-studio","category-web"],"acf":[],"blog_post_summary":"<p>When developing web apps, it\u2019s common to use the browser developer tools to perform various tasks like; modifying the CSS, inspecting network traffic, etc. Because the browser is disconnected from the IDE, if you make changes to the running application in the browser, you will need to remember and reapply those changes to your code [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/237066","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/users\/357"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/comments?post=237066"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/237066\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/media\/237097"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/media?parent=237066"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/categories?post=237066"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/tags?post=237066"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}