微软在Visual Studio集成Edge开发人员工具,简化CSS编辑工作

微软在Visual Studio中集成Edge开发人员工具,发布新的扩展组件预览,而这将能够让网页应用程序开发更加方便快速。在这个扩展组件预览版中,微软激活了Elements和Network工具,供开发者操作CSS和网络功能。

开发人员在开发网页应用程序时,需要使用浏览器开发人员工具执行各种工作,像是修改CSS、检查网络流量等,但由于浏览器与IDE并未连接在一起,当开发者在浏览器对正在执行的应用程序进行更改,便会需要记住这些修改,并且回到IDE中,在程序代码中重复这些变更。

而Visual Studio与Edge开发人员工具的集成,将可以提高网页开发人员的工作效率,在Visual Studio中开发包括ASP.NET Core和ASP.NET在内的网页应用程序,开发者现在可以使用Elements工具增加CSS编辑效率,执行像是可视化CSS flexbox编辑,当开发者使用display:flex属性,扩展组件便会显示flexbox工具图标,开发者便能方便地进行CSS修改。

在这个扩展组件出现之前,开发者通常需要在浏览器执行这些CSS变更操作,并且将这些CSS修改,复制到源码中,但是使用与Visual Studio集成的开发工具,元素工具中的变更,都会应用到源文件案中。

但开发者也不用担心,调整CSS可能意外地变更源文件案,Visual Studio的还原功能,可以撤销之前进行的变更。另外,开发者也可以在Visual Studio中编辑CSS文件,这些变更将会直接应用到正在预览的应用程序中。

另外,在Edge开发人员工具中,Network工具让开发者可以查看网络条件,或是封锁网络请求等操作。开发者可以通过打开网络条件,模拟应用程序在不同网络条件下的行为,而封锁网络请求等功能,则与Edge浏览器提供的相同。

发表评论