devblogs.microsoft.com Open in urlscan Pro
2600:1400:d:581::2f1e  Public Scan

Form analysis
3 forms found in the DOM

Name: searchForm — GET /search

<form class="c-search" autocomplete="off" id="searchForm" name="searchForm" role="search" action="/search" method="GET"
  data-seautosuggest="{&quot;queryParams&quot;:{&quot;market&quot;:&quot;en-us&quot;,&quot;clientId&quot;:&quot;7F27B536-CF6B-4C65-8638-A0F8CBDFCA65&quot;,&quot;sources&quot;:&quot;Microsoft-Terms,Iris-Products,DCatAll-Products&quot;,&quot;filter&quot;:&quot;+ClientType:StoreWeb&quot;,&quot;counts&quot;:&quot;5,1,5&quot;},&quot;familyNames&quot;:{&quot;Apps&quot;:&quot;App&quot;,&quot;Books&quot;:&quot;Book&quot;,&quot;Bundles&quot;:&quot;Bundle&quot;,&quot;Devices&quot;:&quot;Device&quot;,&quot;Fees&quot;:&quot;Fee&quot;,&quot;Games&quot;:&quot;Game&quot;,&quot;MusicAlbums&quot;:&quot;Album&quot;,&quot;MusicTracks&quot;:&quot;Song&quot;,&quot;MusicVideos&quot;:&quot;Video&quot;,&quot;MusicArtists&quot;:&quot;Artist&quot;,&quot;OperatingSystem&quot;:&quot;Operating System&quot;,&quot;Software&quot;:&quot;Software&quot;,&quot;Movies&quot;:&quot;Movie&quot;,&quot;TV&quot;:&quot;TV&quot;,&quot;CSV&quot;:&quot;Gift Card&quot;,&quot;VideoActor&quot;:&quot;Actor&quot;}}"
  data-seautosuggestapi="https://www.microsoft.com/services/api/v3/suggest"
  data-m="{&quot;cN&quot;:&quot;GlobalNav_Search_cont&quot;,&quot;cT&quot;:&quot;Container&quot;,&quot;id&quot;:&quot;c1c9c3m1r1a1&quot;,&quot;sN&quot;:1,&quot;aN&quot;:&quot;c9c3m1r1a1&quot;}" aria-expanded="false" style="overflow-x: visible;">
  <div class="x-screen-reader" aria-live="assertive"></div>
  <input id="cli_shellHeaderSearchInput" aria-label="Search Expanded" aria-controls="universal-header-search-auto-suggest-transparent" aria-owns="universal-header-search-auto-suggest-ul" type="search" name="query" role="text" placeholder="Search"
    data-m="{&quot;cN&quot;:&quot;SearchBox_nav&quot;,&quot;id&quot;:&quot;n1c1c9c3m1r1a1&quot;,&quot;sN&quot;:1,&quot;aN&quot;:&quot;c1c9c3m1r1a1&quot;}" data-toggle="tooltip" data-placement="right" title="" data-original-title="Search"
    style="overflow-x: visible;">
  <input type="hidden" name="blog" value="/visualstudio/" data-m="{&quot;cN&quot;:&quot;HiddenInput_nav&quot;,&quot;id&quot;:&quot;n2c1c9c3m1r1a1&quot;,&quot;sN&quot;:2,&quot;aN&quot;:&quot;c1c9c3m1r1a1&quot;}" style="overflow-x: visible;">
  <button id="search" aria-label="Search" class="c-glyph" data-m="{&quot;cN&quot;:&quot;Search_nav&quot;,&quot;id&quot;:&quot;n3c1c9c3m1r1a1&quot;,&quot;sN&quot;:3,&quot;aN&quot;:&quot;c1c9c3m1r1a1&quot;}" data-bi-mto="true" aria-expanded="false"
    style="overflow-x: visible;">
    <span role="presentation" style="overflow-x: visible;">Search</span>
    <span role="tooltip" class="c-uhf-tooltip c-uhf-search-tooltip" style="overflow-x: visible;">Search</span>
  </button>
  <div class="m-auto-suggest" id="universal-header-search-auto-suggest-transparent" role="group" style="overflow-x: visible;">
    <ul class="c-menu" id="universal-header-search-auto-suggest-ul" aria-label="Search Suggestions" aria-hidden="true" data-bi-dnt="true" data-bi-mto="true" data-js-auto-suggest-position="default" role="listbox" data-tel="jsll"
      data-m="{&quot;cN&quot;:&quot;search suggestions_cont&quot;,&quot;cT&quot;:&quot;Container&quot;,&quot;id&quot;:&quot;c4c1c9c3m1r1a1&quot;,&quot;sN&quot;:4,&quot;aN&quot;:&quot;c1c9c3m1r1a1&quot;}" style="overflow-x: visible;"></ul>
  </div>
</form>

<form id="wp-link" tabindex="-1">
  <input type="hidden" id="_ajax_linking_nonce" name="_ajax_linking_nonce" value="0619222a2b">
  <h1 id="link-modal-title">Insert/edit link</h1>
  <button type="button" id="wp-link-close"><span class="screen-reader-text">Close</span></button>
  <div id="link-selector">
    <div id="link-options">
      <p class="howto" id="wplink-enter-url">Enter the destination URL</p>
      <div>
        <label><span>URL</span>
          <input id="wp-link-url" type="text" aria-describedby="wplink-enter-url"></label>
      </div>
      <div class="wp-link-text-field">
        <label><span>Link Text</span>
          <input id="wp-link-text" type="text"></label>
      </div>
      <div class="link-target">
        <label><span></span>
          <input type="checkbox" id="wp-link-target"> Open link in a new tab</label>
      </div>
    </div>
    <p class="howto" id="wplink-link-existing-content">Or link to existing content</p>
    <div id="search-panel">
      <div class="link-search-wrapper">
        <label>
          <span class="search-label">Search</span>
          <input type="search" id="wp-link-search" class="link-search-field" autocomplete="off" aria-describedby="wplink-link-existing-content">
          <span class="spinner"></span>
        </label>
      </div>
      <div id="search-results" class="query-results" tabindex="0">
        <ul></ul>
        <div class="river-waiting">
          <span class="spinner"></span>
        </div>
      </div>
      <div id="most-recent-results" class="query-results" tabindex="0">
        <div class="query-notice" id="query-notice-message">
          <em class="query-notice-default">No search term specified. Showing recent items.</em>
          <em class="query-notice-hint screen-reader-text">Search or use up and down arrow keys to select an item.</em>
        </div>
        <ul></ul>
        <div class="river-waiting">
          <span class="spinner"></span>
        </div>
      </div>
    </div>
  </div>
  <div class="submitbox">
    <div id="wp-link-cancel">
      <button type="button" class="button">Cancel</button>
    </div>
    <div id="wp-link-update">
      <input type="submit" value="Add Link" class="button button-primary" id="wp-link-submit" name="wp-link-submit">
    </div>
  </div>
</form>

#

<form id="myForm" action="#">
  <div class="modal-body">
    <div class="form-group">
      <label for="code-text">Paste your code snippet</label>
      <textarea class="form-control" id="code-text" style="height: 150px;"></textarea>
    </div>
  </div>
</form>

Text Content

Skip to main content
Microsoft
Visual Studio
Visual Studio
Visual Studio
 * Home
 * DevBlogs
 * Developer
    * Visual Studio
    * Visual Studio Code
    * Visual Studio for Mac
    * DevOps
    * Developer support
    * CSE Developer
    * Engineering@Microsoft
    * Azure SDK
    * IoT
    * Command Line
    * Perf and Diagnostics
    * Dr. International
    * Notification Hubs
    * Math in Office

 * Technology
    * DirectX
    * PIX
    * SurfaceDuo
    * Startups
    * Sustainable Engineering
    * Windows AI Platform

 * Languages
    * C++
    * C#
    * F#
    * Visual Basic
    * TypeScript
    * PowerShell Community
    * PowerShell Team
    * Python
    * Q#
    * JavaScript
    * Java
    * Java Blog in Chinese

 * .NET
    * .NET
    * .NET MAUI
    * Blazor
    * ASP.NET
    * NuGet
    * Xamarin

 * Platform Development
    * #ifdef Windows
    * Apps for Windows
    * Azure Depth Platform
    * Azure Government
    * Bing Dev Center
    * Microsoft Edge Dev
    * Microsoft Azure
    * Microsoft 365 Developer
    * Old New Thing
    * Windows MIDI and Music dev
    * Windows Search Platform

 * Data Development
    * Azure Cosmos DB
    * Azure Data Studio
    * Azure SQL Database
    * OData
    * Revolutions R
    * SQL Server Data Tools

 * More

Login

Search Search

Cancel


EDGE DEVELOPER TOOLS FOR VISUAL STUDIO (PREVIEW)

Sayed H



March 7th, 2022



When developing web apps, it’s 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 https://aka.ms/edgetools-for-vs. In the
current Preview release we have enabled the both the Elements and Network tools.
Below is an animated gif showing you the Elements tool in action.





Download the preview extension



 

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.



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.

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.

You can also edit your CSS files in Visual Studio and the changes will be
applied to the application being previewed. Now that we’ve taken a look at the
Elements tool, lets move on to the Network tool.

 


NETWORK TOOLS

In the embedded version of the Edge dev tools, you can use the following network
tools.

 * Network
 * Network conditions
 * Network request blocking

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.



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.



We won’t cover the Issues or Network request blocking tool here, but those are
available as they are when using Microsoft Edge itself. Let’s move on to the
summary now.

 


SUMMARY

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 download and try out this extension.
For feedback, if you are reporting any bugs please use the built-in support to
Report a Problem. If you have a suggestion, you can also use Report a Problem,
or leave a comment below. We will be watching the comments here.

 

Chris Heilmann (@codepo8)

Sayed Ibrahim Hashimi (@SayedIHashimi)

 

 

 

 

 

 




SAYED HASHIMI SENIOR PROGRAM MANAGER, VISUAL STUDIO

Follow


Posted in Visual Studio Web

READ NEXT

Happy 25th birthday Visual Studio!
It’s now been 25 years since the first release of Visual Studio in 1997 and such
a big milestone deserves a proper celebration. The Visual Studio 25th
Anniversary Event...
Mads K
March 15, 2022
4 comments
Visual Studio 2022 for Mac Preview 7
Visual Studio 2022 for Mac 17.0 Preview 7 is here and continues our focus on
addressing top issues and driving forward to a high-quality GA (general
availability) release. In addition to many fixes, this release brings back
Xamarin mobile tooling as a supported experience and introduces Azure Functions
V4 tooling which supports running on .NET
Jordan M
March 15, 2022
21 comments


7 COMMENTS


LEAVE A COMMENTCANCEL REPLY

Log in to join the discussion.

 * Paul Ehigie March 7, 2022 10:50 pm
   collapse this comment
   
   
   Now this is what I call innovation. I was never a fan for VS till the 64bit
   came out with all the amazing extension then this ? I have now seen my first
   love of an IDE and cant wait to see more from this extension.💕💕💕👍👍👍
   
   Log in to Reply
   * Sayed-Ibrahim-Hashimi March 8, 2022 8:33 am
     collapse this comment
     
     
     Thank you Paul!
     
     Log in to Reply
     
   
 * Dhanush Krishnan March 8, 2022 5:38 pm
   collapse this comment
   
   
   Hope it would be useful for my development
   Thank you 🙂
   
   Log in to Reply
   * Sayed-Ibrahim-Hashimi March 9, 2022 10:03 am
     collapse this comment
     
     
     Thanks Dhanush, please let us know how it goes.
     
     Log in to Reply
     
   
 * Black Elijah (BT-AI/ETW2-PAI) March 15, 2022 3:19 am
   collapse this comment
   
   
   This sounds really cool! I wonder if it would work in our project, though.
   
   We load our CSS files via Webpack, by including them in our .jsx files. e.g.
   
   import './ExampleComponent.css';
   
   Is Edge Developer Tools smart enough to recognize this pattern and still
   carry any CSS changes made in the browser back to the CSS file?
   
   Thanks 🙂
   
   Log in to Reply
   * Sayed-Ibrahim-Hashimi March 15, 2022 12:40 pm
     collapse this comment
     
     
     I don’t believe that it works yet, but the Edge DevTools team is looking at
     ways to support CSS preprocessors. If you could try it and let the Edge
     DevTools team if it’s not working at
     https://github.com/MicrosoftEdge/DevTools/issues/25.
     
     Thanks!
     
     Log in to Reply
     
   
 * Farouk Belhocine March 18, 2022 1:50 pm
   collapse this comment
   
   
   Great feature.
   Hope will enhance our productivity.
   Thanks
   
   Log in to Reply
   

RELEVANT LINKS

 * Visual Studio homepage
 * Visual Studio documentation
 * Visual Studio Dev Essentials
 * Microsoft Azure

Visual Studio on YouTube

 * Visual Studio Tips & Tricks
 * Visual Studio Toolbox
 * Visual Studio Office Hours
 * Writing extensions with Mads

TOP BLOGGERS

Jordan Matthiesen
Senior Program Manager



Mads Kristensen
Principal Program Manager



Leslie Richardson
Program Manager



Grace Taylor
Program Manager



Taysser Gherfal
Senior Program Manager



TOPICS

.NET.NET Core.NET
Framework17.0202264-bitA11yAccessibilityAdministratorADOAndroidAngularJSAnnouncementApplication
InsightsArtificial IntelligenceASP.NETASP.NET
CoreasyncasynchronousAuthenticationAzureAzure Active DirectoryAzure App
ServicesAzure BoardsAzure Cache for RedisAzure Cognitive ServicesAzure Data
LakeAzure DevOpsAzure FunctionsAzure IoT DeviceAzure IoT EdgeAzure IoT HubAzure
Key VaultAzure Kubernetes ServiceAzure Machine LearningAzure MLAzure SDKAzure
Search ServiceAzure StackAzure StorageAzure ToolingBig
DataBingBlazorBlendBreakpointsBuildC#C#C++C++
conformanceCASTCheckstyleCLIcloudcloud developmentcloud
nativeCloudPilotCMakeCode ReviewsCodeLensCodespacesCOMcommand promptConditional
AccessConnectContainersContinuous Integration/Continuous
DeliveryCordovaCSSCustomer DevelopmentdashboardData
ScienceDatabaseDebuggerDebuggingDebugging and DiagnosticsDeep
LearningDevBlogsdeveloperDeveloper Command PromptDeveloper CommunityDeveloper
ProductivityDevTest LabsDiagnosticsDockerDocsdocument managementdotnetEclipse
JDT Language ServerEFEnterpriseEntity
FrameworkEventexceptionExtensionsF#FeedbackFindFind in FilesFsharpGame
DevelopmentgamingGetting StartedGitGit IntegrationGitHubGradlegroup
policyHockeyAppHTMLIdentityInstrumentationIntelliCodeIntelliCode
CompletionsIntelliCode suggestionsIntelliSenseIntelliTestIntelliTraceiOSIoTIoT
EdgeJavaJava Test RunnerJavaScriptKubernetesLicensingLintingLive Sharelive unit
testingMachine LearningMavenMFAmicroservicesMicrosoft
BandMobileMSBuildMulti-repoMultiple RepositoriesMVVMNavigate through
codeNode.jsNuGetnuget packagesnuget performancenuget restoreOffice 365 APIOffice
Developer ToolsOfflineONNXONNX RuntimeOpen Sourcepackage managementparallel
stacksPerformancePerformance ImprovementsPerformance
ProfilerPersonalizationpersonalizePluralsightPowerShellPreviewPreview
FeaturesPricingProducProductivityprofileProfilingPROSEPyDataPythonQ#QuantumRRefactoringRegular
ExpressionsRemoteResourcesrestricted
modeRoadmaproslynSCCMSearchsecurityself-hostedServerless ComputingService
FabricSign insolution load performanceSource
ControlSQLSubmodulesSubscriberSupportTeam Foundation
ServerTeamsTemplatesterminaltestTestingThe Visual Studio Pull Requests
ExtensionthemesTips and TricksTomcatTools for Apache
CordovaTrainingTransformertrustTypeScriptUI DesignUnityUniversal AppsUniversal
Windows PlatformUnrealUnrealEngineUpdateVBVertical Document tabsVertical
tabsvideoVisual BasicVisual StudioVisual Studio 2010Visual Studio 2012Visual
Studio 2013Visual Studio 2015Visual Studio 2017Visual Studio 2019Visual Studio
2019 forVisual Studio 2019 for MacVisual Studio 2022Visual Studio 2022 for
MacVisual Studio 2022 launch eventVisual Studio App CenterVisual Studio
CodeVisual Studio CodespacesVisual Studio Dev EssentialsVisual Studio
EnterpriseVisual Studio for MacVisual Studio Live ShareVisual Studio
OnlineVisual Studio PreviewVisual Studio ProfilerVisual Studio
SubscriptionsVisual Stuidio 2019VSVS Codevs2022VSCodeVSIPVSMacVXAMLWebWeb
AppsWebinarwfhwidgetWindows 10Windows
PhoneWinFormsWPFWSUSXamarinXamarin.FormsXAML


STAY INFORMED






INSERT/EDIT LINK

Close

Enter the destination URL

URL
Link Text
Open link in a new tab

Or link to existing content

Search

No search term specified. Showing recent items. Search or use up and down arrow
keys to select an item.

Cancel


CODE BLOCK

×
Paste your code snippet
Cancel Ok
What's new
 * Surface Pro 8
 * Surface Laptop Studio
 * Surface Pro X
 * Surface Go 3
 * Surface Duo 2
 * Surface Pro 7+
 * Windows 11 apps
 * HoloLens 2

Microsoft Store
 * Account profile
 * Download Center
 * Microsoft Store support
 * Returns
 * Order tracking
 * Virtual workshops and training
 * Microsoft Store Promise
 * Flexible Payments

Education
 * Microsoft in education
 * Devices for education
 * Microsoft Teams for Education
 * Microsoft 365 Education
 * Education consultation appointment
 * Educator training and development
 * Deals for students and parents
 * Azure for students

Business
 * Microsoft Cloud
 * Microsoft Security
 * Azure
 * Dynamics 365
 * Microsoft 365
 * Microsoft Advertising
 * Microsoft Industry
 * Microsoft Teams

Developer & IT
 * Developer Center
 * Documentation
 * Microsoft Learn
 * Microsoft Tech Community
 * Azure Marketplace
 * AppSource
 * Microsoft Power Platform
 * Visual Studio

Company
 * Careers
 * About Microsoft
 * Company news
 * Privacy at Microsoft
 * Investors
 * Diversity and inclusion
 * Accessibility
 * Security

English (United States)
 * Sitemap
 * Contact Microsoft
 * Privacy
 * Manage cookies
 * Terms of use
 * Trademarks
 * Safety & eco
 * About our ads
 * © Microsoft 2022

Notifications