Microsoft Edge IDE-Integration

Verschiedene Features von Microsoft-Tools bieten die Integration der Entwicklung mit Microsoft Edge, Visual Studio Code und Visual Studio, um Ihre Produkte, Webseiten und Web-Apps zu entwickeln, die die vollständige Integration in Microsoft Edge verwenden und verwenden.

Microsoft Edge DevTools-Erweiterung für Visual Studio Code

Mit der Microsoft Edge DevTools-Erweiterung für Visual Studio Code können Sie das Elementtool und das Netzwerktool des Microsoft Edge-Browsers in Visual Studio Code verwenden.

Ohne Visual Studio Code zu verlassen, verwenden Sie Microsoft Edge DevTools, um eine Instanz anzufügen oder eine Instanz von Microsoft Edge zu starten, und führen Sie dann folgende Schritte aus:

  • Zeigen Sie die LAUFZEIT-HTML-Struktur an.
  • Ändern sie das Webseitenlayout.
  • Ändern Sie CSS-Formatvorlagen, und beheben Sie Formatierungsprobleme.
  • Konsolennachrichten lesen.
  • Anzeigen von Netzwerkanforderungen.

Informationen zu Microsoft Edge DevTools-Erweiterung für Visual Studio Code.

Quelldateien in Visual Studio Code öffnen

Mit dem Experiment "Open Source-Dateien in Visual Studio Code " können Sie Microsoft Edge DevTools verwenden, aber dann Ihre Dateien in Visual Studio Code statt im Code-Editor des DevTools-Tools "Quellen " bearbeiten.

Wenn Sie dieses Experiment verwenden, müssen Sie, wenn Sie Visual Studio Code und DevTools verwenden, um Ihre CSS-Regeln zu ändern, nicht mehr den Code-Editor im Quellentool von DevTools verwenden. Sie können einfach den Code-Editor in Visual Studio Code verwenden. Wenn Sie dieses Experiment aktivieren, erhalten lokale Dateien eine andere Behandlung.

Siehe Öffnen von Quelldateien in Visual Studio Code.

Debuggen von Microsoft Edge in Visual Studio Code

Visual Studio Code enthält einen integrierten Debugger für Microsoft Edge, der den Browser starten oder an einen bereits ausgeführten Browser anfügen kann.

Mit diesem integrierten Debugger können Sie Ihren Front-End-JavaScript-Code zeilenweise debuggen und Anweisungen direkt aus Visual Studio Code anzeigen console.log() .

Siehe Debuggen von Microsoft Edge in Visual Studio Code.

Die Webhint-Erweiterung für Visual Studio Code

Verwenden Sie webhint, ein anpassbares Linting-Tool, um die Funktionalität Ihrer Website zu verbessern, einschließlich:

  • Zugänglichkeit.
  • Leistung.
  • Browserübergreifende Kompatibilität.
  • PWA-Kompatibilität.
  • Sicherheit.

webhint überprüft Ihren Code auf bewährte Methoden und häufige Fehler. Identifizieren und beheben Sie Probleme in Ihren Dateien, einschließlich HTML, CSS, JavaScript und TypeScript. Hinweise werden im Text-Editor als wellenförmige Unterstreichungen angezeigt und im Bereich "Probleme " zusammengefasst.

Hinweis: Seit April 2022 wird die Webhint-Erweiterung für Visual Studio Code nicht mehr verwaltet. Informationen zu Microsoft Edge DevTools-Erweiterung für Visual Studio Code.

Visual Studio für die Webentwicklung

Microsoft Visual Studio ist eine integrierte Entwicklungsumgebung (INTEGRATED Development Environment, IDE). Verwenden Sie sie, um Ihre Web-Apps zu bearbeiten, zu debuggen, zu erstellen und zu veröffentlichen. Es ist ein funktionsreiches Programm, das für viele Aspekte Ihrer Webentwicklung verwendet werden kann.

Zusätzlich zum Standard-Editor und Debugger, den die meisten IDEs bereitstellen, enthält Visual Studio Features, die Ihren Entwicklungsprozess vereinfachen, einschließlich:

  • Compiler.
  • Codevollständigungstools.
  • Grafische Designer.
  • Und viele weitere Features.

Siehe Visual Studio für die Webentwicklung.