كلود يصلح الخطأ من صورة
بدل ما تضيع وقتك تشرح الخطأ بالكلام، تحطّ الصورة وكلود يفهم كل شيء.
وقفت قبل أمام خطأ برمجي وبدأت تفكر كيف تشرحه بالكلام؟ تكتب جملة، تحسّها ناقصة، تضيف تفاصيل، وفي النهاية اللي تكتبه ما يعطي الصورة الكاملة. كلود الحين يقرأ الصورة مباشرة، يشوف رسالة الخطأ والكود اللي حولها وكل شيء ظاهر في الشاشة، ويشتغل من فهم حقيقي بدل تخمين.
🧩 إيش هو بالضبط
الفكرة بسيطة: بدل ما تنسخ رسالة الخطأ وتحاول تشرح السياق، تاخذ لقطة شاشة (screenshot) وتحطّها مباشرة في المحادثة مع كلود. الموديل (model) يقرأ كل شيء ظاهر في الصورة، رسالة الخطأ، اسم الملف، رقم السطر، وأي جزء من الكود ظاهر في الخلفية. يعني كلود يشوف نفس اللي تشوفه أنت بالضبط.
التشبيه الأقرب: بدل ما تصف للطبيب وجعك بالكلام فقط، تجيبه صورة الأشعة. كل شيء موجود، ما في شيء يضيع في الوصف.
⚙️ كيف يشتغل
كلود مبني على نموذج متعدد الوسائط (multimodal model). ما يقرأ النصوص فقط، بل يشوف الصور ويستخرج منها معلومات دقيقة. لما تحطّ لقطة شاشة لخطأ برمجي، الموديل يمر عليها ويستخرج:
🔍 نص رسالة الخطأ كاملة حتى لو كانت طويلة
📁 اسم الملف ورقم السطر اللي ظهر فيه الخطأ
🧵 أجزاء الكود الظاهرة حول الخطأ
🖥️ نوع البيئة أو الأداة إذا كانت ظاهرة في الواجهة
بعدها يشتغل على التشخيص بنفس الجودة اللي يشتغلها لو نسخت له الكود يدوياً، لكن بدون ما تتعب في شيء.
اللي يصير في الخلفية:
1️⃣ الموديل يحوّل محتوى الصورة لفهم نصي وبصري مدمج
2️⃣ يحدد الأجزاء ذات الصلة بالمشكلة
3️⃣ يربط بين رسالة الخطأ والكود الظاهر حولها
4️⃣ يعطيك تشخيصاً مباشراً وإيش تغيّر بالضبط
🌍 وين تشوفه في حياتك
هذي الطريقة تنفع في كثير من المواقف اليومية:
💻 خطأ في الـ terminal ما تعرف من وين جاء
🔴 رسالة خطأ في الـ console لتطبيق ويب
📱 تطبيق موبايل وقف عند stack trace معيّن
🧪 اختبار فشل وما تقدر تفهم سبب الفشل من الرسالة
🛠️ الأدوات اللي تستخدمها فعلاً
🔧 Claude.ai
الواجهة الرئيسية لكلود عبر المتصفح. تقدر تحطّ الصورة مباشرة في مربع النص بالسحب والإفلات أو اللصق من الـ clipboard بدون أي إعداد إضافي.
كيف تبدأ:
1️⃣ روح على claude.ai وسجّل دخول أو أنشئ حساب مجاني
2️⃣ افتح محادثة جديدة
3️⃣ خذ لقطة شاشة للخطأ (Mac: Command + Shift + 4، Windows: Windows + Shift + S)
4️⃣ الصق الصورة مباشرة في مربع النص بـ Command+V أو Ctrl+V واكتب سؤالك
🔧 Claude Code
أداة Anthropic للمطوّرين تشتغل من الـ terminal مباشرة. تقدر تعطيها لقطة الشاشة وهي في نفس الوقت تشوف ملفات مشروعك، اللي يعطيها سياقاً أعمق بكثير من الصورة لوحدها.
كيف تبدأ:
1️⃣ ثبّتها بالأمر: npm install -g @anthropic-ai/claude-code
2️⃣ شغّلها من مجلد مشروعك بكتابة: claude
3️⃣ أرفق الصورة في المحادثة وهي تربطها بملفاتك تلقائياً
🔧 Claude Mobile (iOS و Android)
التطبيق الرسمي يدعم إرفاق الصور مباشرة من الـ gallery أو الكاميرا. مفيد لما تشوف خطأ على جهاز ثانٍ وتبغى قراءة سريعة لما يعنيه.
كيف تبدأ:
1️⃣ حمّل التطبيق من App Store أو Google Play
2️⃣ افتح محادثة جديدة
3️⃣ اضغط أيقونة الإرفاق واختر الصورة أو التقطها مباشرة
💡 جرّب بنفسك: خطوة بخطوة
خلينا ناخذ مثال واضح: خطأ ظهر في الـ terminal وما تعرف سببه.
1️⃣ خذ لقطة شاشة للمنطقة اللي فيها الخطأ. على Mac: اضغط Command + Shift + 4 ثم حدد المنطقة. على Windows: اضغط Windows + Shift + S
2️⃣ افتح claude.ai في المتصفح وابدأ محادثة جديدة
3️⃣ الصق الصورة في مربع النص بـ Ctrl+V أو Command+V
4️⃣ اكتب سؤالاً مباشراً: "هذا الخطأ ظهر لما شغّلت المشروع. إيش السبب وكيف أصلحه؟"
5️⃣ كلود يقرأ الصورة ويعطيك تشخيصاً محدداً، في الغالب يحدد لك السطر اللي فيه المشكلة والسبب خلفها
النتيجة: بدل دقائق تقضيها تشرح المشكلة، تحصل على تشخيص دقيق في ثوانٍ. والأهم إنك ما احتجت تكتب أي وصف إضافي.
وش تسوي بعد ذا
✅ جرّب الطريقة على أول خطأ يواجهك اليوم بدل ما تبحث في Google
✅ اكتشف Claude Code إذا كنت تشتغل على مشاريع في الـ terminal، ربطه بملفاتك يرفع دقة التشخيص بشكل واضح
✅ اسأل كلود يشرح لك ليش صار الخطأ وليس فقط كيف تصلحه، الفهم يمنع التكرار
الصورة لا تكذب، وكلود يعرف يقرأها.
———— English ————
Claude Fixes Bugs From a Screenshot
Describing an error in words loses half the context. A screenshot carries everything.
Every developer has been there: staring at an error message, trying to figure out how to put it into words so something can help. You write a sentence, realize it is incomplete, add more detail, and still feel like the real picture is not coming through. Claude reads screenshots directly. It sees the error message, the file name, the line number, the surrounding code — all of it — and works from real understanding instead of a reconstructed guess.
What it actually is
The idea is straightforward. Instead of copying an error message and typing out context, you take a screenshot and paste it into a conversation with Claude. The model reads everything visible in the image: the full error text, the file and line reference, any code visible around the error, and even the environment or tooling if it appears in the interface. Claude sees exactly what you see.
The closest analogy is bringing a medical scan to a doctor instead of describing the pain. Everything is already there. Nothing gets lost in the description.
How it works
Claude is built on a multimodal model. It does not just read text. It processes images and pulls precise information from them. When you paste a screenshot of a code error, the model scans it and extracts:
🔍 The full error message text, even when it runs long
📁 The file name and line number where the error occurred
🧵 Any code visible around the error in the image
🖥️ The environment or tooling type if it appears in the interface
From there it works through the diagnosis with the same quality it would bring to manually pasted code, but with zero effort on your end.
Here is what happens under the hood:
1️⃣ The model converts the image content into a combined visual and textual understanding
2️⃣ It identifies the parts most relevant to the problem
3️⃣ It connects the error message to the surrounding code context
4️⃣ It gives you a direct diagnosis and the specific fix or next step
Where you see it
This approach fits across the everyday situations developers actually run into:
💻 A terminal error you cannot trace back to its source
🔴 A console message in a web app that points nowhere obvious
📱 A mobile app crash with a stack trace that does not decode at a glance
🧪 A failing test whose error message does not clearly name the problem
🛠️ Tools you actually use
🔧 Claude.ai
The main Claude interface running in any browser. You drop a screenshot directly into the text box by dragging it in or pasting from your clipboard. No extensions. No setup.
How to get started:
1️⃣ Go to claude.ai and sign in or create a free account
2️⃣ Start a new conversation
3️⃣ Take a screenshot of the error (Mac: Command + Shift + 4, Windows: Windows + Shift + S)
4️⃣ Paste the image directly into the text box with Command+V or Ctrl+V and ask your question
🔧 Claude Code
Anthropic's developer tool that runs directly from the terminal. You can attach a screenshot and Claude simultaneously has access to your project files, giving it far deeper context than the image alone provides.
How to get started:
1️⃣ Install it by running: npm install -g @anthropic-ai/claude-code
2️⃣ Launch it from your project folder by typing: claude
3️⃣ Attach a screenshot in the conversation and it connects the image to your local files automatically
🔧 Claude Mobile (iOS and Android)
The official Claude app supports attaching images directly from your gallery or camera. Useful when you are looking at an error on a second screen and want a fast read on what it means.
How to get started:
1️⃣ Download the app from the App Store or Google Play
2️⃣ Open a new conversation
3️⃣ Tap the attachment icon and select your screenshot or capture it live
💡 Try it yourself: step by step
Here is a concrete scenario: an error appeared in your terminal and you have no idea what triggered it.
1️⃣ Take a screenshot of the area showing the error. On Mac: press Command + Shift + 4, then drag to select the region. On Windows: press Windows + Shift + S
2️⃣ Open claude.ai and start a new conversation
3️⃣ Paste the screenshot into the text box with Ctrl+V or Command+V
4️⃣ Type a direct question: "This error appeared when I ran the project. What is causing it and how do I fix it?"
5️⃣ Claude reads the image and comes back with a specific diagnosis, usually naming the exact line and the reason behind the failure
What you get: instead of spending minutes describing the problem, you have an accurate diagnosis in seconds. And you did not write a single word of description to get there.
What to do next
✅ Try this on the next error you hit today before reaching for a search engine
✅ Explore Claude Code if you work in the terminal regularly — connecting it to your project files makes the diagnosis noticeably sharper
✅ Ask Claude to explain why the error happened, not just how to fix it. Understanding the root cause stops it from coming back
A screenshot carries more signal than a paragraph. Claude knows how to read it.