آشنایی با Developer Tools اینترنت اکسپلورر 9

آشنایی با Developer Tools اینترنت اکسپلورر 9 با یک ابزار حرفه‌ای بازی کنید در شماره‌های گذشته به بررسی بسیاری از ویژگی‌ها و امکانات اینترنت‌اکسپلورر ۹ پرداخته و گفتیم که بسیاری از امکانات و تنظیمات متداول که باید هنگام کار با IE9 در دسترس باشد، در منوی Tools گردآوری شده و می‌توان با کلیک روی آیکون چرخ‌دنده در بالا و سمت راست پنجره‌ IE9 به آنها دسترسی پیدا کرد. پیش از این درباره‌ بسیاری از امکانات موجود در این منو صحبت کردیم و در این شماره نیز به بررسی اجمالی ابزار F12 developer toolsخواهیم پرداخت. Developer tools در نگاه اول ابزاری است برای توسعه‌دهندگان صفحات وب که می‌توانند از آن برای عیب‌یابی و نیز بررسی سازگاری صفحات وب و نرم‌افزارهایی که تحت وب ایجاد کرده‌اند، استفاده کنند، اما به عنوان یک کاربر عادی نیز می‌توان از برخی امکانات موجود در این ابزار استفاده کرد که در ادامه به آنها اشاره خواهد شد. این ابزار را می‌توانید با فشردن کلید F12 فعال کنید. البته پنجره‌ Developer tools را می‌توانید به صورت Pin شده در قسمت پایین پنجره‌ IE9 برای سایت دلخواهتان داشته باشید و آن را به صورت یک پنجره‌ مجزا ببینید. برای این منظور کافی است از کلید ترکیبی Ctrl+P استفاده کنید. البته این کلید ترکیبی فقط هنگامی درست کار می‌کند که Developer tools در حالت انتخاب باشد؛ در غیر این صورت برگه‌ Print باز می‌شود! برای Minimize کردن این ابزار در پایین پنجره‌ IE9 نیز می‌توانید از کلید ترکیبی Ctrl+M استفاده کنید. پنجره‌ Developer Tools به 2 قسمت مجزا تقسیم شده ‌است و از طریق سربرگ‌های مختلف موجود در سمت چپ این پنجره (موسوم به Code level tools) مـــی‌توانـــید کدهای HTML ، CSSهای استفاده شده، Scriptها و ... را برای صفحه‌ وب مشاهده کنید. البته باید بدانید کدهایی که در این قسمت مشاهده می‌شود، کدهای موجود در منبع وب‌سایت یا Source code نیست، بلکه آن چیزی است که IE9 تفسیر کرده‌ است! بررسی جزء‌به‌جزء این سربرگ‌ها نه‌تنها برای کاربران عادی کاربردی نیست، بلکه می‌تواند دردسرساز هم باشد؛ می‌توانید کدهای موجود در قسمت HTML را تغییر دهید و نتیجه‌ آن را خودتان مشاهده کنید! اما استفاده از این کدها برای سرگرمی بد نیست! به عنوان مثال می‌توانید یکی از عبارات موجود در سایت مایکروسافت را به نام خودتان تغییر دهید، لینک‌های موجود در صفحات را عوض کنید، رنگ‌بندی و اندازه فونت‌ها را به هم بریزید و ... و در نهایت این تغییرات را در قالب یک فایل HTML ذخیره کنید. اما در میان این شش سربرگ، برگه‌ Network می‌تواند برای بررسی حجم قسمت‌های مختلف یک وب‌سایت و میزان دریافت و ارسال اطلاعات به آن برایتان مفید باشد. به این برگه بروید و روی دکمه‌ Start capturing کلیک کنید و کار با صفحه‌ وب جاری را ادامه دهید. در این صورت اطلاعات بسیار مفیدی را به دست خواهید آورد. از جمله مقدار دیتایی که ارسال یا دریافت کرده‌اید، صفحات و برنامه‌‌هایی که در خلال کار، با آنها سروکار داشته‌اید و زمان بارگذاری هر کدام و ... . در قسمت پایین برگه نیز مجموع ترافیک ارسال و دریافت شده را مشاهده می‌کنید. در نوار ابزار پنجره‌ Developer tools چند ابزار کاربردی برای کاربران عادی وجود دارد. اگر در کدهای HTML یا قسمت‌های دیگر تغییری ایجاد کرده‌اید و نتیجه آن برایتان خوشایند نیست، می‌توانید از منوی File، گزینه‌ Undo all را انتخاب کنید تا همه چیز به حالت اول بازگردد. در منوی Disable باغـــــیرفعال‌کردن Pop-up blocker مانع بازشدن صفحات Pop-up می‌شود! اگر در منوی View روی گزینه‌ Link paths کلیک کنید، می‌توانید نشانی تمام لینک‌های موجود در صفحه‌ وب را مشاهده و حتی آنها را انتخاب و در جای دیگر کپی کنید. همین طور می‌توانید روی گزینه‌ Link Reports کلیک کنید تا جزئیات لینک‌های موجود در صفحه‌ وب جاری به صورت یکجا و در قالب یک صفحه‌ xml به شما نمایش داده شود. در منوی Image گزینه‌های کاربردی مختلفی وجود دارد. می‌توانید با انتخاب گزینه ‌Disable images، صفحه‌ وب جاری را عاری از تصاویر کنید! به این ترتیب در برخی موارد می‌توانید سرعت بازشدن صفحات وبی را که فقط به متن آنها احتیاج دارید، افزایش دهید. در همین حال با فعال‌کردن گزینه‌ Show image dimensions می‌توان ابعاد تصاویر را بر حسب Pixel روی آنها مشاهده کرد. فعال کردن گزینه‌های Show image file size و Show image path به ترتیب حجم عکس برحسب Byte و نیز نشانی اینترنتی را روی تصاویر نمایش خواهد داد. می‌توانید نشانی تصاویر را بسادگی کپی‌کرده و در جای دیگر از آنها استفاده کنید! منوی بعدی در نوار ابزار پنجره Developer Tools ،Cache است. اگر می‌خواهید Cache یک دامنه‌ اینترنتی را بدون حذف کامل Cache اینترنت اکسپلورر پاک کـــنید، مـــــی‌توانید از این منو گزینه‌ Clear browser cache for this domain را انتخاب کنید. گزینه‌ کاربردی دیگر، Resize است که در منوی Tools قرار دارد. از طریق این گزینه می‌توانید بدون تغییر در Resolution نمایشگر، ابعاد پنجره‌ IE را بر حسب یکی از Resolutionهای متداول تنظیم کنید. همچنین می‌توانید با فعال‌کردن گزینه‌ Show ruler، خط‌کشی برحسب Pixel در اختیار داشته باشید و فاصله‌ نقاط موجود در صفحه‌ وب را برحسب Pixel به دست آورید که برای طراحی صفحات وب جدید می‌تواند برایتان کاربرد بسیاری داشته باشد. اگر کمی با کدهای HTML آشنایی داشته باشید، می‌دانید که رنگ‌ها در صفحات وب با کد مشخص استفاده می‌شود. ممکن است در یک صفحه‌ وب یک رنگ را بپسندید و بخواهید در صفحاتی که طراحی می‌کنید از آن بهره ببرید. برای پیدا کردن کد رنگ‌های به کار رفته در صفحه‌ وب جاری که مشاهده می‌کنید می‌توانید ابزار Show color picker را در منوی Tools مورد استـــفاده قرار دهید و کافی است Color picker را روی صفحه حرکت دهید تا کد رنگ آن قسمت را ببینید. شاید کاربردی‌ترین گزینه‌ Developer tools برای کاربران عادی، Browser mode باشد. حتما تا به حال حین کار با IE9 با وب‌سایت‌های به هم ریخته برخورد داشته‌اید. در این گونه موارد، معمولا استفاده از Compatibility view مشکل را حل می‌کند، اما اگر مشکل حل نشد چه؟! می‌توانید Browser mode را از این قسمت تا IE7پایین بیاورید و مشکل را حل کنید! در همین قسمت می‌توانید Compatibility view را برای IE9 فعال کنید. برای فعال کردن Compatibility view در حالت عادی نیاز نیست که حتما به این قسمت بیایید، می‌توانید از نوار ابزار IE9 و از منوی Tools آن را فعال کرده یا روی آیکونی که به شکل یک کاغذ پاره شده ‌است در نوار نشانیIE9 کلیک کنید. درباره نحوه‌ کار با این قسمت و چگونگی اعمال تغییر در تنظیمات آن در شماره‌های آینده صحبت خواهیم کرد. محمدسعید نمازی منبع: http://msdn.microsoft.com منبع