Web essentials  jest zestawem narzędzi usprawniającym pracę z aplikacjami webowymi. Wersję 2013 można ściągnąć z stąd:

https://visualstudiogallery.msdn.microsoft.com/56633663-6799-41d7-9df7-0f2a504ca361

Po zainstalowaniu pakietu i odpaleniu aplikacji z Visual Studio, w przeglądarce  na samym dole zobaczymy nowy pasek:

Zacznijmy od “inspekcji”. Naciskając na przycisk Inspect, możemy zaznaczyć dowolny fragment strony:

Na powyższym screenie zaznaczyłem tekst. Przechodząc teraz do Visual Studio, zostanie zaznaczony widok i powyższy tekst:

Bardzo to ułatwia pracę z nowym kodem, gdzie nie wiemy jeszcze jak aplikacja została podzielona i jakie widoki znajdują się. Wystarczy wtedy odpalić stronę i zaznaczyć fragment, który chcemy znaleźć w kodzie.

Analogicznie możemy skorzystać z opcji “Design”. Klikając na ten przycisk, a potem na dowolny fragment strony, będziemy mogli edytować fragment strony:

Co ważne, zmiana zostanie odzwierciedlona w pliku źródłowym i przechodząc z powrotem do VS, zobaczymy nową zawartość:

Kolejna opcja to “Unused CSS”. Przyciskając go, pojawi się ikonka sugerująca nagrywanie:

Wszelkie nieużywane style będą pojawiać się w VS:

To oczywiście nie koniec możliwości Web Essentials.  Więcej o pakiecie napiszę w przyszłych postach.