Web-Entwicklungstools: Editoren, DevTools und Produktivität

Code-Editoren

VS Code: Beliebtester Code-Editor. Umfangreiches Extension-Ökosystem, IntelliSense, Debugging, Git-Integration. Kostenlos und Open Source.

WebStorm: JetBrains IDE. Fortgeschrittenes Refactoring, Code-Analyse, Framework-Support. Kostenpflichtig.

Sublime Text: Leicht und schnell. Minimalistische Oberfläche. Öffnet große Dateien schnell.

Vim/Neovim: Terminal-basierter Editor. Keyboard-driven, hochgradig anpassbar. Steile Lernkurve.

Auswahlkriterien: VS Code für Anfänger. WebStorm für Enterprise. Sublime Text für Minimalisten. Vim für Terminal-Liebhaber.

Browser DevTools

Elements/Inspector: DOM und CSS inspizieren. Style-Änderungen live testen. Box Model, Layout, Computed Styles.

Console: JavaScript-Fehler und Logs anzeigen. Interaktive REPL. Zugriff auf DOM-Elemente.

Network: HTTP-Anfragen überwachen. Waterfall Chart, Timing, Headers, Payload. Performance-Bottlenecks erkennen.

Performance: CPU, Memory, Rendering Profiling. Flame Chart, Long Tasks, Layout Shifts. Core Web Vitals Messung.

Application: Storage (Cookies, localStorage, IndexedDB), Service Worker, Cache, Manifest. PWA Debugging.

Lighthouse: Performance, Accessibility, Best Practices, SEO Audit. Score und Empfehlungen für jede Seite.

Terminal-Tools

Git: Versionskontrolle. Branch, Merge, Rebase, Stash. PR-Management mit GitHub CLI (gh).

npm/yarn/pnpm: Package Manager. Dependency-Management, Script-Ausführung, Workspace.

Docker: Containerisierung. docker build, docker run, docker compose. Lokale Entwicklungsumgebung.

curl/wget: HTTP-Anfragen. API-Testing, Datei-Download. curl -X POST -H 'Content-Type: application/json' -d '{...}' url.

jq: JSON-Prozessor. JSON in Terminal parsen und filtern. curl ... | jq '.data'.

fzf: Fuzzy Finder. Datei-, History-, Process-Suche. Erhöht Terminal-Produktivität.

Produktivitätstools

Postman/Insomnia: API-Testing und Dokumentation. Collection, Environment, Test Script. Team-Kollaboration.

Figma: UI/UX Design. Component Library, Prototyping, Dev Mode (CSS Export).

Chrome Extensions: React DevTools, Vue DevTools, Redux DevTools, axe (Accessibility).

Grammarly: Rechtschreibung und Grammatik-Prüfung. Für Blogbeiträge und Dokumentation.

Notion/Obsidian: Notizen und Wissensmanagement. Dokumentation, Wiki, Task Tracking.

Code-Qualitätstools

ESLint: JavaScript/TypeScript Linting. Code-Standards, Fehlererkennung. Custom Rules und Plugins.

Prettier: Code-Formatierung. Automatische Einrückung, Quote Style, Semikolon. Save on Format.

TypeScript: Statische Typüberprüfung. Compile-Zeit Fehlererkennung. IDE Autocomplete.

Husky + lint-staged: Pre-Commit Hooks. Lint und Format Check vor Commit. In CI/CD Pipeline integriert.

SonarQube: Code-Qualitätsanalyse. Bug, Vulnerability, Code Smell Erkennung. Quality Gates.

Entwickler-Produktivitätstipps

Tastaturkürzel: Editor- und Browser-Kürzel lernen. Mausnutzung minimieren.

Snippets: Häufig verwendete Code-Schnipsel als Snippet speichern. VS Code Snippets, Emmet.

Aliases: Terminal-Aliase definieren. alias gs='git status', alias dc='docker compose'.

Dotfiles: Konfigurationsdateien (bashrc, vimrc, gitconfig) mit Git verwalten. Schnelle Einrichtung auf neuem Rechner.

Learning: Dev.to, Hacker News, CSS-Tricks, Smashing Magazine. Kontinuierliches Lernen und auf dem Laufenden bleiben.