Overview
This lecture introduces Eruda, a web-based developer console for debugging JavaScript on mobile browsers, outlining its features, installation methods, configuration, and plugin system.
What is Eruda?
- Eruda is a developer tool that runs as an in-browser console for mobile and desktop browsers.
- It helps debug JavaScript, inspect DOM elements, monitor network requests, and view storage data on live websites.
Key Features
- Console: Display JavaScript logs for debugging.
- Elements: Inspect and check the current DOM state.
- Network: View HTTP request and response statuses.
- Resources: Access localStorage and cookie details.
- Info: Show URL and user agent information.
- Snippets: Store and use frequently needed code snippets.
- Sources: View HTML, JavaScript, and CSS source code.
Installation Methods
- Install via npm:
npm install eruda --save.
- Add
<script src="node_modules/eruda/eruda.js"></script> and initialize with eruda.init();.
- Use CDN links (jsDelivr or cdnjs) to load:
<script src="//cdn.jsdelivr.net/npm/eruda"></script>.
- To prevent loading on mobile by default (due to size), only enable when
eruda=true is in the URL or a flag in localStorage is set.
- Use dynamic import in modern JavaScript:
import('eruda').then(eruda => eruda.default.init()); during development.
Configuration Options
- Pass a configuration object to
eruda.init(), specifying container (DOM element) and tool (array of tool names to include).
- Example:
eruda.init({ container: el, tool: ['console', 'elements'] });.
Plugins
- Extend Eruda with plugins such as:
- eruda-monitor: Show page FPS and memory usage.
- eruda-features: Detect browser features.
- eruda-timing: Display performance and resource timing.
- eruda-code: Run and test JavaScript code.
- eruda-benchmark: Benchmark JavaScript performance.
- eruda-geolocation: Test geolocation APIs.
- eruda-orientation: Test device orientation APIs.
- eruda-touches: Visualize touch interactions.
- eruda-vue: Integrate with Vue.js devtools.
- Plugin creation is supported with official guides.
Key Terms & Definitions
- DOM — Document Object Model, the structure of web pages.
- CDN — Content Delivery Network, hosts files for fast and easy web access.
- localStorage — Browser storage for key-value data.
- Fps — Frames per second, measures rendering speed.
- User Agent — String identifying the browser and OS to the server.
Action Items / Next Steps
- Try running the Eruda snippet on a site to see the console in action.
- Experiment with installation by npm or CDN as discussed.
- Review Eruda’s documentation for advanced configuration or plugin development.