dtools - Web Developer Tools

About

# 🛠️ dtools - Web Developer Tools

## Title

**dtools - Powerful Web Developer Tools Browser Extension**

## Introduction

dtools is a powerful browser extension designed specifically for web developers, integrating multiple practical development debugging tools, performance monitoring metrics, and automatic tech stack detection capabilities. Whether you're developing, debugging, or optimizing websites, dtools provides comprehensive support for all your needs.

### Core Features

**📄 Page Information Analysis**
- Quickly view complete URL information (protocol, hostname, path, query parameters, hash)
- Automatically extract Meta tag information (description, keywords, author, viewport settings, etc.)
- Support for Open Graph and Twitter Card metadata parsing
- Image statistics and heading structure analysis
- Detailed DOM structure statistics

**🔍 Comprehensive Tech Stack Analysis**  
- Extensive front-end technology support: Automatically detects various technologies used on web pages, covering mainstream development frameworks, UI component libraries, utility libraries, and more.  
- Deep integration content recognition: Accurately identifies the usage of content management systems (CMS), data analysis tools, and content delivery networks (CDNs).  
- Clear architectural insights: Not only lists technology names but also provides detailed DOM structure statistical analysis, helping developers quickly understand application architecture.  
- Packaging tool detection: Analyzes the most popular packaging tools in modern web development.  

**📊 Performance Metrics Monitoring**
- Core Web Vitals: LCP (Largest Contentful Paint), FID (First Input Delay), CLS (Cumulative Layout Shift), FCP (First Contentful Paint)
- Network performance analysis: TTFB (Time to First Byte), DNS query time, TCP connection time, SSL handshake time, request/response time
- DOM performance metrics: DOM interactive time, DOM complete time, DOM processing time, resource load time, page load complete time
- Automatic performance scoring system (Good/Needs Improvement/Poor)

**💻 Device Information Viewing**
- Operating system and browser detailed information
- Screen resolution and viewport dimensions
- User Agent string parsing
- Network status, memory, CPU cores
- Language, timezone, platform information

**🗜️ Image Compression Tool**
- Support for multiple image formats
- Batch processing functionality
- Adjustable compression settings
- Maximum size and dimension limits
- Web Worker support for better performance

**💾 Storage Management**
- Storage analysis: LocalStorage, SessionStorage, Cookies overview
- Storage viewer: View, edit, and delete LocalStorage and SessionStorage items
- Cookie viewer: View, edit, and delete cookies with detailed information

**🔧 API Client**
- Built-in Postman-style API testing tool
- Support for multiple HTTP methods (GET, POST, PUT, DELETE, etc.)
- Custom request headers and body
- Response viewing and formatting
- Request history

**🛠️ Utility Toolset**
Includes 14+ developer utility tools:
- URL encode/decode
- Base64 encode/decode
- JWT token parser and validator
- JSON formatter and beautifier
- Hash calculation (MD5, SHA1, SHA256, SHA512)
- UUID generator
- Lorem Ipsum text generator
- Meta tag generator
- Unix timestamp converter
- Color picker and converter
- CSS box-shadow generator
- Regular expression tester
- User Agent parser
- QR code generator

**⚙️ Additional Features**
- Multi-language support: Chinese, English, Japanese
- Modern UI: Built with React + Ant Design
- Donation support: Support continuous developer improvements
- Settings functionality: Customizable language preferences
- Tab state persistence: Remembers last active tab

### Use Cases

- **Frontend Development Debugging**: Quickly view page information, detect tech stack, analyze DOM structure
- **Performance Optimization**: Monitor Core Web Vitals metrics, identify performance bottlenecks
- **API Testing**: Quickly test interfaces without switching tools
- **Daily Development**: Use built-in toolset to improve development efficiency
- **Learning and Research**: Understand technologies and architecture used by websites

dtools is committed to providing web developers with a one-stop development tool solution, making development more efficient and debugging more convenient.