Full-Stack Development Fundamentals

Chapter 14: Development Tools

14.1 Browser DevTools

Browser Developer Tools are essential for debugging, testing, and optimizing web applications. Every modern browser includes powerful DevTools.

Opening DevTools:

• Chrome/Edge: F12 or Ctrl+Shift+I (Windows) / Cmd+Option+I (Mac)
• Firefox: F12 or Ctrl+Shift+I
• Safari: Enable in Preferences, then Cmd+Option+I

DevTools Panels:

• Elements/Inspector: View and edit HTML/CSS
• Console: Run JavaScript, view logs and errors
• Network: Monitor HTTP requests and responses
• Sources: Debug JavaScript with breakpoints
• Application: View storage, cookies, cache
• Performance: Analyze page performance
• Security: Check SSL certificates and security issues

Common Debugging Tasks:

• Inspect HTML elements and CSS styles
• Test CSS changes in real-time
• View console errors and warnings
• Monitor network requests and responses
• Debug JavaScript with breakpoints
• Test responsive design with device emulation

Console Commands:

// Log messages
console.log("Debug message");
console.error("Error message");
console.warn("Warning message");

// Inspect objects
console.table(arrayData);
console.dir(object);

// Measure performance
console.time("operation");
// ... code ...
console.timeEnd("operation");

14.2 Package Managers

Package managers simplify installing and managing dependencies for your projects.

npm (Node Package Manager):

• Comes with Node.js installation
• Largest package registry
• Manages JavaScript dependencies
• Commands: install, uninstall, update, list

npm Commands:

# Initialize project
npm init

# Install package
npm install package-name

# Install as dev dependency
npm install --save-dev package-name

# Install globally
npm install -g package-name

# Update packages
npm update

# List installed packages
npm list

# Run scripts
npm run script-name

Composer (PHP):

• Dependency manager for PHP
• Manages PHP libraries
• Uses composer.json for configuration
• Commands: install, require, update, dump-autoload

pip (Python):

• Package installer for Python
• Manages Python packages
• Uses requirements.txt
• Commands: install, uninstall, list, freeze

14.3 Build Tools

Build tools automate tasks like compiling, minifying, and bundling code.

Webpack:

• Module bundler for JavaScript
• Bundles assets and dependencies
• Supports code splitting and optimization
• Configurable via webpack.config.js

Vite:

• Fast build tool and dev server
• Instant server start
• Optimized production builds
• Great developer experience

Gulp:

• Task runner for automation
• Stream-based build system
• Good for repetitive tasks
• Uses gulpfile.js for configuration

14.4 Code Quality Tools

Code quality tools help maintain consistent, error-free code.

ESLint:

• JavaScript linter
• Finds and fixes code problems
• Enforces coding standards
• Configurable rules

Prettier:

• Code formatter
• Automatically formats code
• Ensures consistent style
• Works with many languages

TypeScript:

• Typed superset of JavaScript
• Catches errors at compile time
• Improves code quality
• Better IDE support