components/ErudaDebugger.tsxTSX 'use client';
import { useEffect } from 'react';
export default function ErudaDebugger() {
useEffect(() => {
if (typeof window !== 'undefined') {
// only on mobile
const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
if (isMobile) {
console.log('Mobile detacted，load [Eruda] DevTools');
import('eruda').then(({ default: eruda }) => {
eruda.init({
tool: ['console', 'elements', 'network', 'resources', 'info'],
useShadowDom: true,
autoScale: true,
defaults: {
displaySize: 80,
transparency: 0.9,
theme: 'Dark'
}
});
}).catch(err => {
console.error('Eruda failed:', err);
});
}
}
}, []);
return null;
}
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html>
<body>
{children}
{process.env.NODE_ENV === 'development' && <ErudaDebugger />}
</body>
</html>
);
}
Windows:
Mac:
Linux:
change 0.0.0.0 to your real ip
next.js
npx next dev -H 0.0.0.0 -p 3000
vite
npx vite --host 0.0.0.0 --port 3000
- Ensure that your iPhone and development computer are connected to
the same Wi-Fi network.
- Try pinging your iPhone from your development computer, or ping your development computer from another device.
- Check if your computer's firewall is enabled; you might need to allow inbound connections on port 3000.
change 0.0.0.0 to your real ip