Dev Console Kit

A smart, colorful, and educational logging utility designed for React & Next.js students.
It helps you debug faster, understand Server/Client environments, and fix CSS layout issues instantly.

---

Features

Environment Detection: Automatically labels logs as [CLIENT] or [SERVER].

Mentor Tips: Provides a random "Clean Code" tip in the console on every refresh (30+ categorized tips).

CSS X-Ray: A "Golden Shot" feature to outline all DOM elements for layout debugging.

Pretty Logs: Color-coded success, error, warning, info, and debug messages.

Performance Tracking: Built-in timer functions to measure execution time.

Toggle Logging: Enable/disable all logs for production builds.

Smart Inspection: Table view for objects in browser, detailed structure in terminal.

TypeScript Support: Full type definitions included.
---

Installation

``bash
npm install dev-console-kit
`
or
`bash
yarn add dev-console-kit
`

$3

After installing, create a test file to verify:

`javascript
import Logger from 'dev-console-kit';

Logger.success("dev-console-kit is working!");
`

---

Usage

`javascript
import Logger from 'dev-console-kit';
`

$3

`javascript
Logger.success("User logged in successfully!");
Logger.error("API Connection Failed", { error: 500 });
Logger.warning("This component is deprecated.");
Logger.info("Application started on port 3000");
Logger.debug("Detailed debugging info", { state: "loading" });
`

$3

`javascript
Logger.time("API Call");
await fetchUserData();
Logger.timeEnd("API Call"); // Logs: "API Call: 245.32ms"
`

$3

`javascript
// In your main entry file
if (process.env.NODE_ENV === 'production') {
Logger.setEnabled(false);
}
`

$3

`javascript
const user = { id: 1, name: "John", role: "Admin" };
Logger.inspect("User Data", user);
`

$3

`javascript
// Add this inside a useEffect or call it temporarily
Logger.debugLayout();
`

Tip: Call Logger.debugLayout() once, identify your layout issue, then remove the call.

---

API Reference

$3

`javascript
Logger.setEnabled(false); // Disable all logs
Logger.setEnabled(true); // Re-enable logs
`

$3

This package includes TypeScript definitions. No additional @types package needed!

`typescript
import Logger from 'dev-console-kit';

Logger.success("Fully typed!", { id: 1 });
`

---

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature`)
5. Open a Pull Request

---

License

ISC License - See LICENSE file for details.

---

Author

Murat Hüdavendigâr Öncü
Website
GitHub

---

Support

If you find this package helpful, please give it a ⭐️ on GitHub!

For issues and questions, visit the Issues page.