Home-theater-designers
کروم DevTools ڈویلپرز کے لیے ایک ضروری اثاثہ ہے۔ اگرچہ دوسرے براؤزرز بہت آسان ٹربل شوٹنگ ٹولز پیش کرتے ہیں ، کروم ڈیو ٹولز اس کے کثیر فنکشنل انٹرفیس اور مقبولیت کی وجہ سے آپ کی توجہ کے قابل ہے۔
کروم ڈیبگنگ ٹولز کے طاقتور سوٹ کی وجہ سے ڈویلپرز کے لیے سب سے زیادہ مقبول براؤزر ہے۔ Chrome DevTools کا استعمال آسان ہے ، لیکن آپ کو یہ سمجھنے کی ضرورت ہے کہ اس سے زیادہ سے زیادہ فائدہ اٹھانے کے لیے یہ کیسے کام کرتا ہے۔
کروم ڈویلپر ٹولز کیسے کام کرتے ہیں۔
کروم ڈیو ٹولز آپ کو ویب سائٹ پر اس کے ایرر کنسول اور دیگر ڈیبگنگ اور مانیٹرنگ ٹولز کے ذریعے مسائل حل کرنے دیتا ہے۔ DevTools کے استعمال سے فرنٹ اینڈ کمیاں سامنے آتی ہیں اور آپ کو نگرانی کرنے دیتی ہے کہ آپ کی ویب سائٹ موبائل اور ٹیبلٹ ڈیوائسز پر کیسے دکھائی دیتی ہے۔
DevTools کے ساتھ ، آپ کسی ویب سائٹ کے کوڈ ، جیسے جاوا اسکرپٹ ، ایچ ٹی ایم ایل ، اور سی ایس ایس پر ریئل ٹائم ترمیم کر سکتے ہیں اور اپنی تبدیلیوں کے فوری نتائج حاصل کر سکتے ہیں۔
DevTools کے ذریعے آپ کی تبدیلیاں ویب سائٹ کو مستقل طور پر متاثر نہیں کرتی ہیں۔ وہ صرف عارضی طور پر متوقع نتیجہ ظاہر کرتے ہیں جیسے کہ آپ نے انہیں اصل سورس کوڈ پر لاگو کیا ہو۔ یہ آپ کو اپنی ویب سائٹ کو بہت تیزی سے لوڈ کرنے کے طریقوں پر کام کرنے دیتا ہے اور کیڑے نکالنا آسان بنا دیتا ہے۔
کروم ڈیو ٹولز تک کیسے رسائی حاصل کریں۔
آپ کئی طریقوں سے Chrome DevTools تک رسائی حاصل کر سکتے ہیں۔ میک OS پر شارٹ کٹ طریقہ کے ساتھ ڈویلپر ٹولز کھولنے کے لیے ، دبائیں۔ Cmd + Opt + I۔ . اگر آپ ونڈوز OS استعمال کر رہے ہیں تو ، کو دبائیں۔ Ctrl + Shift + I۔ آپ کے کی بورڈ پر چابیاں
متبادل کے طور پر ، آپ اسکرین کے اوپری دائیں کونے میں تین نقطوں پر کلک کرکے کروم ڈویلپر ٹولز تک رسائی حاصل کرسکتے ہیں۔ کی طرف مزید ٹولز۔ اور منتخب کریں ڈویلپر ٹولز۔ . دوسرا آپشن یہ ہے کہ ویب پیج پر رائٹ کلک کریں اور پر کلک کریں۔ معائنہ کریں۔ اختیار
ویب سائٹ کی تشخیص کے لیے کروم ڈویلپر ٹولز کا استعمال
کروم ڈیو ٹولز ویب پیج کو موافقت اور خرابیوں کا ازالہ کرنے کے کئی طریقے پیش کرتے ہیں۔ آئیے کچھ طریقوں پر ایک نظر ڈالتے ہیں جو DevTools آپ کی مدد کر سکتے ہیں۔
ملاحظہ کریں کہ آپ کی ویب سائٹ اسمارٹ فون پر کیسی دکھتی ہے۔
ایک بار جب آپ اپنے کروم براؤزر کو ڈویلپر موڈ میں تبدیل کردیتے ہیں ، تو یہ آپ کے ویب پیج کا آدھا سائز والا ورژن پیش کرتا ہے۔ تاہم ، اس سے آپ کو حقیقی نظارہ نہیں ملے گا کہ یہ اسمارٹ فون یا ٹیبلٹ پر کیسا ہوگا۔
شکر ہے ، ویب پیج کی سکرین کا سائز طے کرنے کے علاوہ ، کروم ڈیو ٹولز آپ کو مختلف موبائل سکرین کی اقسام اور ورژن کے درمیان بھی سوئچ کرنے دیتا ہے۔
اس آپشن تک رسائی حاصل کرنے کے لیے ، ٹوگل کریں معائنہ کریں۔ موڈ اگلا ، پر کلک کریں۔ قبول DevTools کے اوپر بائیں کونے پر ڈراپ ڈاؤن کریں اور اپنا پسندیدہ موبائل ڈیوائس منتخب کریں۔ ویب پیج پھر آپ کے منتخب کردہ موبائل ڈیوائس کے سائز کے مطابق رینڈر اور ایڈجسٹ کرتا ہے۔
وائی پر ہومبریو ڈاؤن لوڈ کرنے کا طریقہ
ویب پیج کی سورس فائلز تک رسائی حاصل کریں۔
آپ ان فائلوں تک رسائی حاصل کر سکتے ہیں جو ویب صفحہ بناتی ہیں کروم ڈیو ٹولز کے ذریعے۔ ان فائلوں تک رسائی کے لیے ، پر کلک کریں۔ ذرائع DevTools مینو کے اوپری حصے میں آپشن۔ یہ ویب سائٹ کے فائل سسٹم کو بے نقاب کرتا ہے اور آپ کو ایڈیٹنگ بھی دیتا ہے۔
آپ سورس فائلوں کو بھی تلاش کرسکتے ہیں ، جو اس وقت مددگار ثابت ہوسکتی ہیں جب آپ کسی ایسے ویب پیج کے ساتھ کام کر رہے ہوں جس میں بہت سے وسائل ہوں۔ DevTools کے ذریعے سورس فائل تلاش کرنے کے لیے ، پر کلک کریں۔ تلاش کریں۔ کنسول کے بالکل اوپر آپشن۔
تاہم ، اگر آپ نہیں ڈھونڈ سکتے ہیں۔ تلاش کریں۔ آپشن ، ایک بہتر متبادل کی بورڈ شارٹ کٹ استعمال کرنا ہے۔ میک OS پر ، دبائیں Cmd + Opt + F سورس فائل کی تلاش کے لیے کلیدیں۔ اگر آپ ونڈوز OS استعمال کر رہے ہیں تو ، دبائیں Ctrl + Shift + F سورس فائل سرچ بار تک رسائی کی کلید۔
ویب پیج پر براہ راست ترمیم کریں۔
DevTools استعمال کرنے کے بنیادی مقاصد میں سے ایک کو انجام دینا ہے۔ ویب پیج پر عناصر کی فوری جعلی ترمیم۔ . ایک بار جب آپ ڈویلپر ٹولز پر سوئچ کر لیتے ہیں تو ، آپ ویب سائٹ کے ایچ ٹی ایم ایل مواد پر کلک کرکے ترمیم کرسکتے ہیں۔ عناصر اختیار پھر ، کسی بھی نقطہ پر دائیں کلک کریں جس میں آپ کوڈ ایڈیٹر میں تبدیلیاں لاگو کرنا چاہتے ہیں اور منتخب کریں۔ HTML کے بطور ترمیم کریں۔ .
سی ایس ایس پراپرٹیز میں ترمیم کرنے کے لیے جو ان لائن نہیں ہیں ، منتخب کریں۔ ذرائع . اگلا ، وہ CSS فائل منتخب کریں جس میں آپ ترمیم کرنا چاہتے ہیں۔ براہ راست ترمیم کرنے کے لیے اپنے کرسر کو کوڈ کنسول کے اندر اپنی پسند کی لائن پر رکھیں۔ ایسا کرنے سے آپ ویب پیج پر کسی بھی طرز کی تبدیلیوں کے بارے میں فوری رائے دیتے ہیں۔
نوٹ کریں کہ جب آپ DevTools کے ذریعے کسی صفحے میں ترمیم کرتے ہیں تو ، اپنے براؤزر پر صفحہ کو دوبارہ لوڈ کرنے سے وہ اصل شکل میں واپس آجاتا ہے ، اور ترمیم صرف آپ کو نظر آتی ہے۔ DevTools کے ذریعے ترمیم نہ تو ہموار چلنے پر اثر انداز ہوتی ہے اور نہ ہی دوسرے صارفین کے لیے اس ویب سائٹ کا استعمال۔
جاوا اسکرپٹ کوڈ کو DevTools کنسول سے ڈیبگ کریں۔
جاوا اسکرپٹ کو ڈیبگ کرنے کا ایک بہترین طریقہ کروم کے ڈویلپر ٹولز کا استعمال ہے۔ یہ آپ کو غلط سکرپٹ کی براہ راست رپورٹ کے ساتھ ساتھ بگ کا صحیح مقام فراہم کرتا ہے۔
جاوا اسکرپٹ والی ویب سائٹ کو ڈیزائن کرتے وقت DevTools کو ہمیشہ کھلا رکھنا اچھا عمل ہے۔ مثال کے طور پر ، چل رہا ہے console.log () ہدایات کے ایک سیٹ پر جاوا اسکرپٹ کی کمانڈ اگر پروگرام کامیابی سے چلتا ہے تو DevTools کنسول میں اس لاگ کا نتیجہ دکھاتا ہے۔
بطور ڈیفالٹ ، کنسول آپ کی ویب سائٹ پر جاوا اسکرپٹ کے کسی بھی مسئلے کی اطلاع دیتا ہے۔ آپ دیو ٹولز کے نچلے حصے میں کنسول تلاش کرسکتے ہیں یا پر کلک کرکے اس تک رسائی حاصل کرسکتے ہیں۔ تسلی کروم ڈیو ٹولز ونڈو کے اوپر آپشن۔
ڈیٹا بیس سے ریسورس لوڈنگ کی نگرانی کریں۔
جاوا اسکرپٹ کو ڈیبگ کرنے کے علاوہ ، کنسول آپ کو ان وسائل کی تفصیل بھی دے سکتا ہے جو ویب سائٹ کے ڈیٹا بیس سے صحیح طریقے سے لوڈ نہیں ہو رہے ہیں۔
اگرچہ یہ ہمیشہ پسدید کے مسائل کو ڈیبگ کرنے کا بہترین طریقہ نہیں ہے ، پھر بھی یہ آپ کو بتاتا ہے کہ کون سے وسائل واپس آرہے ہیں۔ 404۔ ان عناصر کا ڈیٹا بیس استفسار چلانے کے بعد خرابی۔
متعلقہ: عام ویب سائٹ کی خرابیاں اور ان کا کیا مطلب ہے۔
کروم ڈویلپر ٹولز کی واقفیت کو تبدیل کریں۔
کروم ڈویلپر ٹولز کی پوزیشن تبدیل کرنے کے لیے ، DevTools کے اندر تین مینو ڈاٹس پر کلک کریں (براؤزر پر اہم نہیں)۔ پھر سے اپنی پسندیدہ پوزیشن منتخب کریں۔ گودی کی طرف۔ اختیار
Chrome DevTools ایکسٹینشنز انسٹال کریں۔
آپ زبان یا فریم ورک سے متعلقہ ایکسٹینشنز بھی انسٹال کر سکتے ہیں جو Chrome DevTools کے ساتھ کام کرتی ہیں۔ ان ایکسٹینشنز کو انسٹال کرنے سے آپ اپنے ویب پیج کو زیادہ موثر طریقے سے ڈیبگ کر سکتے ہیں۔
آپ کروم میں Chrome DevTools کے لیے دستیاب ایکسٹینشنز کی فہرست تک رسائی حاصل کر سکتے ہیں۔ نمایاں DevTools ایکسٹینشنز۔ گیلری
ویب سائٹ پر سیکیورٹی کے مسائل کو چیک کریں۔
Chrome DevTools آپ کو اس بات کا اندازہ کرنے دیتا ہے کہ آپ کی ویب سائٹ کتنی محفوظ ہے۔ ویب سیکورٹی سرٹیفکیٹ اور کنکشن کتنا محفوظ ہے ، دوسروں کے درمیان۔ چیک کرنے کے لیے کہ آپ کی ویب سائٹ محفوظ ہے ، پر کلک کریں۔ سیکورٹی DevTools کے اوپری حصے میں آپشن۔
کی سیکورٹی ٹیب آپ کو اپنی ویب سائٹ کی سیکورٹی کی تفصیلات کا جائزہ دیتا ہے اور آپ کو کسی بھی ممکنہ خطرات کے بارے میں بتاتا ہے۔
اپنی ویب سائٹ کا آڈٹ کریں۔
کروم ڈیو ٹولز میں ایک خصوصیت ہے جو آپ کو مخصوص پیرامیٹرز کی بنیاد پر اپنی ویب سائٹ کی مجموعی کارکردگی چیک کرنے دیتی ہے۔
اس خصوصیت تک رسائی کے لیے ، منتخب کریں۔ مینارہ DevTools ونڈو کے اوپری حصے میں آپشن۔ اگلا ، ان پیرامیٹرز کو منتخب کریں جنہیں آپ چیک کرنا چاہتے ہیں ، پھر دونوں میں سے کسی ایک پر نشان لگائیں۔ موبائل۔ یا ڈیسک ٹاپ آپ کا ویب پیج مختلف پلیٹ فارمز پر کس طرح پرفارم کرتا ہے یہ دیکھنے کے اختیارات۔
اگلا ، پر کلک کریں۔ رپورٹ تیار کریں۔ آپ نے پہلے منتخب کردہ پیرامیٹرز کی بنیاد پر اپنے ویب پیج کا تجزیہ چلانا ہے۔
آپ ویب سائٹ کے رن ٹائم یا لوڈنگ کی کارکردگی کا بھی جائزہ لے کر اس پر کلک کر سکتے ہیں۔ کارکردگی۔ اختیار ٹیسٹ چلانے کے لیے ، آئکن کے ساتھ والے آئیکون پر کلک کریں۔ ریکارڈ بٹن پر کلک کریں۔ رن ٹائم تجزیہ کرنے کا آپشن۔ متبادل کے طور پر ، لوڈ ٹائم کارکردگی کا جائزہ لینے کے لیے اس کے نیچے دوبارہ لوڈ بٹن پر کلک کریں۔ پر کلک کریں رک جاؤ۔ تجزیہ کار کو روکنا اور نتائج دکھانا۔
کروم ڈیو ٹولز سے فائدہ اٹھائیں۔
آپ کو جس چیز کی ضرورت ہے اس پر انحصار کرتے ہوئے ، کروم ڈیو ٹولز آپ کو صرف سادہ ویب سائٹ ڈیبگنگ سے زیادہ کرنے دیتا ہے۔ شکر ہے ، DevTools ہر مہارت کے پروگرامرز کے لیے استعمال کرنا آسان ہے۔ یہاں تک کہ آپ جس ویب سائٹ پر جاتے ہیں اس کا سورس کوڈ دیکھ کر آپ ویب سائٹ فرنٹ اینڈ ڈویلپمنٹ کی کچھ بنیادی باتیں بھی سیکھ سکتے ہیں۔
ویڈیو سے آڈیو لینے کا طریقہ
آپ کچھ دوسرے اختیارات بھی دریافت کر سکتے ہیں جن پر ہم نے اس مضمون میں بحث نہیں کی۔ لہذا ، دستیاب خصوصیات کے ساتھ کھیلنے کے لئے آزاد محسوس کریں۔ اس کے علاوہ ، ان خصوصیات کو تبدیل کرنا کسی ویب سائٹ کو تھوڑا سا نقصان نہیں پہنچاتا ہے۔
بانٹیں بانٹیں ٹویٹ ای میل۔ راسبیری پائی پر کروم او ایس کا استعمال کیسے کریں۔ایک Chromebook برداشت نہیں کر سکتے؟ Raspbian کا متبادل تلاش کر رہے ہیں؟ اپنے Raspberry Pi پر Chrome OS کا ورژن انسٹال کرنے کا طریقہ یہاں ہے۔
اگلا پڑھیں۔ متعلقہ موضوعات۔- انٹرنیٹ
- پروگرامنگ۔
- ایچ ٹی ایم ایل
- ویب سازی
- جاوا اسکرپٹ۔
- گوگل کروم
ادوو کسی بھی سمارٹ ٹیک اور پیداوری کے بارے میں پرجوش ہے۔ اپنے فارغ وقت میں ، وہ کوڈنگ کے ساتھ کھیلتا ہے اور جب وہ بور ہوتا ہے تو شطرنج بورڈ پر سوئچ کرتا ہے ، لیکن اسے تھوڑی دیر میں معمول سے الگ ہونا بھی پسند ہے۔ لوگوں کو جدید ٹیکنالوجی کے راستے دکھانے کا ان کا جذبہ انہیں مزید لکھنے کی ترغیب دیتا ہے۔
Idowu Omisola سے مزیدہماری نیوز لیٹر کو سبسکرائب کریں
ٹیک ٹپس ، جائزے ، مفت ای بکس ، اور خصوصی سودوں کے لیے ہمارے نیوز لیٹر میں شامل ہوں!
سبسکرائب کرنے کے لیے یہاں کلک کریں۔