خطای صفحه وب برای اشکال زدایی. خطاهای اسکریپت در اینترنت اکسپلورر دلایل و روش های حذف پروفایل پرس و جوهای SQL اشکال زدایی یک صفحه وب

هنگام گشت و گذار در اینترنت مرورگر اینترنت Explorer ممکن است پیام هایی را نشان دهد که صفحه دارای خطا است و ممکن است به درستی نمایش داده نشود. بیایید به چند روش برای رفع این مشکل نگاه کنیم.

دستورالعمل

اگر هیچ مشکل قابل مشاهده ای در مرورگر وجود ندارد، به جز یک خطای متناوب، می توانید اشکال زدایی اسکریپت را خاموش کنید تا پیام دوباره ظاهر نشود (اگر خطا در بیش از یک سایت، اما در چندین سایت به طور همزمان ظاهر شد، ادامه دهید. به مرحله بعد). از منوی Tools، Internet Options را باز کنید، تب Advanced را انتخاب کنید و کادر کنار Prevent script debugging را علامت بزنید. اگر می خواهید اعلان همه خطاها را خاموش کنید، علامت کادر "نمایش اعلان هر خطای اسکریپت" را بردارید.

سعی کنید سایتی را که باعث خطا شده است را هنگام مرور از یک حساب دیگر یا از رایانه دیگری باز کنید تا ببینید آیا مشکل محلی است یا خیر. اگر خطا ظاهر شد، به احتمال زیاد ناشی از کد صفحه وب نادرست است. در این صورت، می توانید با دنبال کردن دستورالعمل های مرحله قبل، اشکال زدایی اسکریپت را غیرفعال کنید. اگر هنگام مرور سایت با استفاده از رایانه یا حساب دیگری مشکل برطرف شد، به مرحله بعدی ادامه دهید.

شاید مرورگر اینترنت اکسپلورردر زمان مرور صفحه، اسکریپت های فعال، جاوا و اکتیو ایکس را که نمایش اطلاعات در صفحه را تعیین می کنند، مسدود نمی کند. برای رفع مشکل، باید تنظیمات امنیتی مرورگر خود را بازنشانی کنید. برای انجام این کار، در منوی "ابزار"، "گزینه های اینترنت" را انتخاب کنید و به تب "امنیت" بروید. روی دکمه "پیش فرض" و سپس "OK" کلیک کنید. اگر پس از راه‌اندازی مجدد صفحه‌ای که باعث خطا شد، مشکل همچنان ادامه داشت، روش بعدی را امتحان کنید.

همانطور که می دانید مرورگر فایل های موقت و کپی صفحات را در یک پوشه جداگانه برای دسترسی بعدی به آنها ذخیره می کند. اگر اندازه پوشه خیلی بزرگ شود، برخی از صفحات ممکن است خطاهایی را نشان دهند. مشکل را می توان با پاک کردن دوره ای پوشه فایل های موقت حل کرد. برای انجام این کار، کادر گفتگوی Internet Options را از منوی Tools باز کنید. در تب General، در گروه History، روی دکمه Delete کلیک کنید. کادرهای مربوط به فایل‌های موقت اینترنت، کوکی‌ها، تاریخچه، داده‌های فرم وب را علامت بزنید و روی OK کلیک کنید.

البته موارد دیگری نیز وجود دارد - من قطعاً به آنها اشاره خواهم کرد.

فایرباگ برای فایرفاکس

من مطمئن نیستم که آیا آتش سوزیمولد سایر ابزارهای توسعه دهنده است، اما قطعا محبوب ترین، راحت ترین و کاربردی ترین تا به امروز است.

Firebug یک افزونه برای فایرفاکس است، به این معنی که باید از سایت افزونه های فایرفاکس دانلود و نصب شود.

برای فراخوانی فایرباگ کافیست F12 را فشار دهید.

ویژگی های این افزونه:

• بازرسی و ویرایش HTML به صورت پویا.
• ویرایش CSS در پرواز.
• اشکال زدایی جاوا اسکریپت خط فرمانبرای اجرای اسکریپت ها؛
• نظارت بر درخواست های شبکه - می توانید اندازه و زمان دانلود فایل ها و اسکریپت ها، هدر درخواست ها را مشاهده کنید.
• تجزیه کننده DOM.

شما می توانید برای مدت طولانی در مورد این ویژگی ها با جزئیات صحبت کنید، اما من فکر می کنم که آنها برای همه خوانندگان ما شناخته شده است، و اگر نه - اطلاعات دقیقدر صفحه اصلی فایرباگ یا همان ترجمه ایلیا کانتور است.

علاوه بر خود فایرباگ، ممکن است نیاز داشته باشید لوسیون مفیدبه او - شیرینی آتشین، که با آن (تعجب:-) می توانید کوکی ها را مشاهده و اصلاح کنید.

نوار ابزار برنامه نویس WEB برای فایرفاکس

یکی دیگر از افزودنی های مفید به Ognelis. به نظر می رسد این است:

اجازه دهید از طریق نقاط.

غیر فعال کردن

به شما امکان می دهد جاوا اسکریپت را خاموش کنید، استفاده از حافظه پنهان را غیرفعال کنید، که در هنگام توسعه بسیار مفید است (به شما امکان می دهد مطمئن شوید که صفحه بارگیری شده است آخرین به روزرسانی ها، رنگ های استفاده شده در صفحه را لغو کنید و آنها را با رنگ های استاندارد جایگزین کنید، ارسال در هدر ارجاع دهنده (صفحه ای که انتقال از آن انجام شده است) را غیرفعال کنید.

بیسکویت ها

یک گزینه مفید برای کار با کوکی ها: آنها را می توان مشاهده، حذف، مسدود و اضافه کرد.

css

این منو جالب‌ترین ویژگی نوار ابزار توسعه‌دهنده - ویرایش سریع CSS را در خود دارد. علاوه بر این امکان مشاهده css، غیر فعال کردن و غیره و غیره وجود دارد. به نظر من، وجود میانبرهای صفحه کلید در اینجا بسیار مفید است (برای مثال CTRL + SHIFT + C به شما امکان می دهد بلافاصله به مشاهده سبک های صفحه بروید)

تشکیل می دهد

همه چیز برای کار با فرم ها: نمایش رمزهای عبور، نمایش اطلاعات در مورد فرم ها، تبدیل روش های فرم (GET »POST و بالعکس) و موارد دیگر. عملکرد مفید «پر کردن فیلدهای فرم» برای پر کردن خودکار فیلدهای فرم (به عنوان مثال، هنگام آزمایش یک سایت در زمانی که عملکرد به خاطر سپردن رمز عبور غیرفعال است. در غیر این صورت، هیچ چیز مفیدی در این پاراگراف نمی بینم.

تصاویر

یک عملکرد مفید برای خاموش کردن تصاویر وجود دارد - برای اینکه ببینید سایت شما بدون تصاویر چگونه به نظر می رسد. تصاویر را می توان دایره کرد، اندازه آنها را نشان داد، ویژگی های alt را نشان داد.

اطلاعات

این منو گزینه های زیادی دارد. نمایش ویژگی های class و id در صفحه می تواند مفید باشد. علاوه بر این، مورد "نمایش اطلاعات رنگ" جالب است - برای دریافت سریع اطلاعات در مورد رنگ هایی که در صفحه استفاده می شود. "مشاهده اندازه سند" - اندازه صفحه را مشاهده کنید. "مشاهده سرصفحه های پاسخ" - سرصفحه های صفحه را مشاهده کنید.

متفرقه

پرکاربردترین ویژگی پاک کردن کش است. علاوه بر این، "خط کش صفحه" - خط کش، "صفحه ذره بین" - ذره بین و "راهنماهای خط" - چند خط در اینجا موجود است که می تواند برای اصلاح الگو مفید باشد.

طرح کلی

انتخاب عناصر مختلف صفحه - جداول، سرفصل ها، پیوندها، فریم ها، بلوک ها. تغییر اندازه به شما امکان می دهد اندازه پنجره مرورگر را به گونه ای تغییر دهید که با هر پسوند استاندارد صفحه نمایش مطابقت داشته باشد. ابزارها در اینجا ویژگی های ذخیره شده برای اعتبار سنجی صفحه هستند. هم محلی و هم خارجی. راحت و دسترسی سریعاعتبار سنجی HTML، CSS و موارد دیگر. می توانید از میانبر صفحه کلید CTRL+SHIFT+H برای اعتبارسنجی HTML استفاده کنید.

مشاهده منبع

چشم انداز کد منبع. امکان مشاهده در اپلیکیشن خارجی، مشاهده کد تولید شده.

سمت راست مورد علاقه من است. این یک اعتبارسنجی سریع HTML، CSS و نشانگر خطای جاوا اسکریپت است. اگر مشکلی وجود نداشته باشد، نماد سبز و در صورت وجود مشکل قرمز است.

نوار ابزار توسعه دهنده اینترنت اکسپلورر

شروع از 8.0 اشکال زدایی خطا در حال حاضر در این مرورگر تعبیه شده است. به راحتی نامیده می شود کلید F12. درست است، او به عنوان یک برنامه دهه 90 بدبخت است.

اما ابزار بسیار خنک تری برای این مرورگر وجود دارد که به اصطلاح نوار ابزار توسعه دهنده اینترنت اکسپلورر را می توان از لینک دانلود کرد.

از نظر ظاهر، این نوار ابزار، البته، شبیه فایرباگ است، اما، افسوس، هنوز به آن بزرگ نشده است. اگرچه از طرف دیگر دارای ویژگی هایی است که فایرباگ ندارد. من نوار ابزار توسعه دهنده اینترنت اکسپلورر را ترکیبی از Firebug و توسعه دهنده وب فایرفاکسنوار ابزار.

مانند firebug، گزینه ای برای بررسی یک عنصر وجود دارد با یک کلیک ساده. اما، اگر بلافاصله بتوانیم بالشتک ها و حاشیه ها را ببینیم، در اینجا چنین امکانی وجود ندارد.

همچنین، نوار ابزار توسعه دهنده اینترنت اکسپلورر مانند Firebug، درخت عنصر را به صورت پویا به روز نمی کند. یعنی اگر با استفاده از js چیزی را در صفحه تغییر دهیم، با استفاده از این نوار ابزار چیزی نخواهیم دید.

از چیزهایی که می توانید لذت ببرید - تغییر سریع CSS (روشی آسان برای یافتن مواردی که باید هک کنید :)، توانایی غیرفعال کردن CSS و تصاویر، توانایی پاک کردن سریع حافظه پنهان و بازی با کوکی ها، دسترسی سریع به اعتبارسنجی.

خوشمزه ترین: یک انتخابگر رنگ داخلی وجود دارد که به شما امکان می دهد با استفاده از قطره چکان هر رنگی را از صفحه دریافت کنید. (برای ff یک افزونه ColorZilla جداگانه وجود دارد).

Debug Debug Bar برای اینترنت اکسپلورر

می توانید DebugBar را برای اینترنت اکسپلورر از لینک داده شده دانلود کنید.

یک پسوند جالب در نوع خود. به عنوان یک پانل اضافی برای مرورگر نصب شده است:

بنا به دلایلی، یک موتور جستجوی داخلی، یک قطره چکان، امکان تغییر اندازه پنجره و دوباره، به دلایلی، امکان ارسال صفحه به یک دوست برای صابون وجود دارد. اگرچه ممکن است مفید باشد. اما نتوانستم از این فرصت استفاده کنم.

علاوه بر این، یک بازرس وجود دارد:

روش بازرسی با کلیک یا اشاره برای توسعه دهندگان مناسب نبود: آنها به چیز جالب تری رسیدند. در DebugBar، باید هدف را به عنصر مورد نظر بکشید تا آن را در درخت ببینید. هیچ گزینه ای برای ویرایش CSS وجود ندارد. اما یک اعتبار سنجی و یک کنسول داخلی js وجود دارد.

و اگر تنظیمات را جستجو کنید، می توانید این را پیدا کنید:

هم خنده دار و هم غمگین.

مشخص است که Developer Toolbar در اکسپلورر هشتم ساخته خواهد شد. مشابه آنچه در پاراگراف سوم توضیح داده شده است، اما امیدواریم که بهتر باشد.

Debug DragonFly برای Opera

DragonFly از نسخه 9.5 در Opera تعبیه شده است، بنابراین نیازی به نصب آن نیست. برای فعال کردن Dragonfly به Tools → Advanced → Developer Tools بروید. و اگر به زبان انگلیسی است، ابزارها → پیشرفته → ابزارهای توسعه دهنده.

من بلافاصله به شما هشدار می دهم که DragonFly در مرحله Alpha2 است، این موضوع بسیاری از اشکالات آن را توضیح می دهد.

لیست امکانات:

• بازرس DOM؛
• بر روی Inspection کلیک کنید (دوباره، ما padding را مانند فایرفاکس نخواهیم دید).
• ویرایش؛
• دسترسی سریع به کنسول خطا

DF چیزی شبیه به یک صفحه جداگانه در یک قاب است. اگر آن را باز کنید، برای همه تب ها باز می شود (برخلاف فایرباگ). بنابراین، قبل از بررسی یک عنصر، باید صفحه مورد نظر خود را از لیست انتخاب کنیم.

متأسفانه، در اینجا، مانند اینترنت اکسپلورر، نوار ابزار Dav عناصر ایجاد شده به صورت پویا را نمایش نمی دهد. و به طور کلی، وقتی صفحه را بررسی می کنیم، هیچ جاوا اسکریپتی اجرا نمی شود: پیوندها و دکمه ها کلیک نمی شوند. بیایید امیدوار باشیم که وقتی DragonFly به انتشار نزدیک می شود، همه این ویژگی ها را ببینیم.

اشکال زدایی WEB Inspector در سافاری

من فوراً در مورد مرورگر خواهم گفت سافاریمن اطلاعات را سوت زدم، بنابراین، همانطور که می گویند، مسئولیتی در قبال کفایت مطالب ندارم.

برای فعال کردن مورد "توسعه" در منوی سافاری، باید مورد مربوطه را در تنظیمات فعال کنید (برگه "پیشرفته"):

توابع زیر در منوی "توسعه" در دسترس ما هستند:

بیایید نگاهی دقیق تر به بازرس WEB بیندازیم:

به طور پیش فرض، بازرس در حالت نمایش HTML باز می شود. اما می توان آن را به حالت نمایش DOM تغییر داد. برای انجام این کار، یک سوئیچ در صفحه بالایی وجود دارد. هنگامی که ماوس را روی یک عنصر در بازرس قرار می دهید، در خود صفحه برجسته می شود. شما نمی توانید padding را مشاهده کنید، نشانه گذاری یا CSS را تغییر دهید، یا تغییرات پویا در DOME را در لحظه مشاهده کنید، همانطور که در FireBug نمی توانید مشاهده کنید. اما، ببینید، به نظر می رسد بسیار زیبا است.

اگر می خواهید با بازرس در پنجره مرورگر کار کنید، می توانید روی دکمه در گوشه پایین سمت چپ کلیک کنید.

حتی در سافاری، عملکردی مانند "خط زمانی شبکه" در دسترس است (دکمه "شبکه" در بازرس):

شما به وضوح می توانید ببینید که فایل ها چه زمانی و چه مدت بارگذاری می شوند. شما همچنین می توانید سرصفحه های درخواست را مشاهده کنید، اما، متأسفانه، نمی توانید خود محتوا را مشاهده کنید.

اشکال زدایی برای توسعه دهندگان در گوگل کروم

لم در یک فرم پیشرفته به دنیا آمد و او بلافاصله، هرچند در حال حاضر کج، اما همچنان ابزارهایی برای توسعه دهندگان دارد.

• بازرس DOM؛
• دیباگر جاوا اسکریپت؛
• کنسول جاوا اسکریپت

برای بررسی یک عنصر، روی آن کلیک راست کرده و منوی زمینه"مشاهده کد عنصر" را انتخاب کنید:

عملکرد مانند سافاری است: عناصر در شناور برجسته می شوند، اما ویرایش CSS و HTML در دسترس نیست، تغییرات در DOM ردیابی نمی شوند. فقط، دکمه در گوشه پایین سمت چپ، که باید بازرس را به پنجره مرورگر متصل کند، کار نمی کند.

در تب "منابع" موارد زیر را مشاهده می کنیم:

کمی با مقیاس در سافاری متفاوت است. Translucent در این نمودار اندازه فایل نسبی است و رنگ کامل زمان دانلود است. به هر حال، بدیهی است که این بخش از کروم هنوز تا تکمیل شدن فاصله دارد.

در این مقاله معروف ترین افزونه ها و ابزارهای داخلی مرورگرها را بررسی کردم.

موارد دیگری نیز وجود دارد، به عنوان مثال:

• Internet Explorer WEB Development Helper یک کمک کننده خوب برای توسعه دهندگان ASP.NET (Internet Explorer) است.
• WEB Developer Toolbar - نوار ابزار اینترنت اکسپلورر و فایرفاکس. چندین ویژگی مفید وجود دارد.
• نوار ابزار دسترسی به وب - نوار ابزار برای اینترنت اکسپلورر. هیچ چیز جالبی نیست

اگر افزونه هایی وجود دارد که من به آنها اشاره نکردم، اما ارزشش را دارند، یا عملکردهایی برای افزونه های ذکر شده وجود دارد که از قلم انداختم، بنویسید.

برای سلامتی استفاده کنید!

نوشتن HTML عالی است، اما چگونه می‌دانید وقتی چیزی کار نمی‌کند، خطا کجاست؟ این مقاله چندین ابزار را توضیح می‌دهد که به شما کمک می‌کنند تا خطاها را در HTML پیدا و رفع کنید.

اشکال زدایی ترسناک نیست

در حین نوشتن کد، معمولاً همه چیز خوب پیش می رود تا زمانی که شما مرتکب اشتباه شوید. بنابراین کد شما کار نمی کند، یا آنطور که مد نظر شماست کار نمی کند. اگر سعی کنید یک برنامه Rust غیر کار را کامپایل کنید، کامپایلر یک خطا را گزارش می کند:

در این مورد، درک پیام خطا نسبتاً آسان است - "رشته نقل قول دوگانه بدون پایان". اگر با دقت به println!(سلام، دنیا!") نگاه کنید، متوجه خواهید شد که وجود ندارد نقل قول دوگانه. البته، درک پیام های خطا با افزایش کد شما بسیار دشوارتر می شود و حتی ساده ترین موارد نیز می تواند برای کسانی که چیزی در مورد Rust نمی دانند ترسناک باشد.

اما از اشکال زدایی نترسید! برای نوشتن و اشکال زدایی راحت هر کدی، باید زبان و ابزارهای آن را بدانید.

HTML و اشکال زدایی

درک HTML به سختی Rust نیست. HTML قبل از اینکه مرورگر آن را تجزیه کند و نتیجه را نمایش دهد به هیچ شکل دیگری کامپایل نمی شود (تفسیر می شود، نه کامپایل). نحو عناصر HTMLبسیار واضح تر از "زبان های برنامه نویسی واقعی" مانند Rust، JavaScript یا Python. نحوه خواندن HTML توسط مرورگرها بیشتر است متحملنسبت به زبان های برنامه نویسی که کد خود را دقیق تر تفسیر می کنند. این در عین حال هم بد است و هم خوب.

کد تحمل

پس تحمل به چه معناست؟ به طور کلی، وقتی کد را به هم می ریزید، با دو نوع خطا مواجه می شوید:

• خطاهای نحوی: اینها اشتباهات املایی هستند، همانطور که در مثال Rust در بالا ذکر شد. اینها معمولاً به راحتی قابل رفع هستند، به شرطی که با نحو زبان آشنا باشید و معنی پیام های خطا را بدانید.
• خطاهای منطقی: اینها خطاهایی هستند که زمانی ظاهر می شوند که نحو درست باشد، اما کد به هدف خود عمل نمی کند، یعنی برنامه به درستی اجرا نمی شود. رفع این موارد دشوارتر از موارد نحوی است، زیرا هیچ پیامی که نشان دهنده محل اشتباه شما باشد نمایش داده نمی شود.

HTML از خطاهای نحوی رنج نمی برد زیرا مرورگر کد را با تحمل می خواند، به این معنا که صفحات را می توان حتی در صورت وجود خطاهای نحوی ارائه کرد. مرورگرها قوانین داخلی برای تفسیر نشانه گذاری بد نوشته شده دارند و شما می توانید چیزی را اجرا کنید حتی اگر منظورتان چیز دیگری باشد. این می تواند یک مشکل واقعی باشد!

در یک یادداشت: HTML قابل خواندن است زیرا زمانی که وب برای اولین بار به وجود آمد، تصمیم گرفته شد که به افراد اجازه داده شود تا محتوا را حتی در صورت نادرست بودن کد منتشر کنند، زیرا این بسیار مهمتر از اطمینان از صحت کامل نحو است. اگر وب در مورد تازه کارها سختگیر بود، در حال حاضر چندان محبوب نبود.

یادگیری فعال: معرفی کد مدارا

زمان بررسی ماهیت کدهای متحمل در HTML است.

اعتبار سنجی HTML

از مثال بالا مشخص است که ارزش بررسی اعتبار HTML را دارد. در مثال ساده بالا، شما فقط می توانید تمام کدها را مرور کنید و خطاها را پیدا کنید، اما در مورد صفحات بزرگ و پیچیده چطور؟

بهتر است صفحه را در سرویس اعتبار سنجی نشانه گذاری بررسی کنید. توسط W3C، سازمانی که مسئول مشخصات HTML، CSS و سایر فناوری‌های وب است، ایجاد و نگهداری می‌شود. این سرویس HTML شما را بررسی می کند و خطاهای موجود در آن را گزارش می کند.

HTML را می توان در آدرس با آپلود فایل یا کپی کردن آن در صفحه بررسی کرد.

یادگیری فعال: اعتبارسنجی یک سند HTML

1. سرویس اعتبار سنجی نشانه گذاری را در مرورگر خود باز کنید.
2. به حالت اعتبارسنجی با ورودی مستقیم بروید.
3. کل کد سند (نه فقط بدنه) را کپی کرده و در فضای ورودی قرار دهید.
4. مطبوعات بررسی (بررسی).

لیستی از خطاها و سایر اطلاعات را مشاهده خواهید کرد.

کار با پیام های خطا

معمولاً بلافاصله مشخص می شود که پیام ها چه معنایی دارند، اما گاهی اوقات باید سعی کنید بفهمید که چیست. اکنون تمام خطاها را مرور می کنیم و معنی آنها را تحلیل می کنیم. توجه داشته باشید که پیام ها شامل یک ردیف و یک ستون کد هستند تا به راحتی خطاها را پیدا کنید.

• "End tag li ضمنی، اما عناصر باز وجود داشت" (2 نمونه): هیچ برچسب پایانی صریحی وجود ندارد، اگرچه مرورگر حدس می‌زند که کجا باید باشد. پیام به خطی بعد از خطی اشاره می کند که در آن تگ پایان انتظار می رفت، اما شما مکان مناسب را پیدا خواهید کرد.
• «عنصر محصور قوی»: این بسیار است اشتباه ساده- عنصر) نشان می دهد که محتوای آن از اهمیت، جدیت یا فوریت بالایی برخوردار است. مرورگرها معمولا محتوا را ارائه می دهند با حروف درشت."> بسته نیست و پیام مستقیماً به تگ شروع اشاره می کند.
• "برچسب پایان قوی قوانین تودرتو را نقض می کند": این عنصر به اشتباه تودرتو شده است - هیچ تگ باز منطبقی در این سطح وجود ندارد.
• "پایان فایل زمانی که داخل یک مقدار مشخصه باشد. نادیده گرفتن برچسب": پیام مرموز. موضوع این است که در جایی (به احتمال زیاد در انتهای سند) ویژگی یک عنصر به اشتباه ثبت شده است و انتهای فایل در این ویژگی ظاهر شده است. پیوند در مرورگر قابل مشاهده نیست - به احتمال زیاد، مشکل در کنار آن است.
• "End of file seeed and there were open element": فایل به پایان رسیده است اما برخی از عناصر بسته نشده اند. پیام پایان فایل را نشان می دهد، در این مورد عنصر بسته نشده است، مثال: پیوند به صفحه اصلی موزیلا ↩

↩ ↩

اغلب، کاربران می توانند وضعیتی را مشاهده کنند که در آن یک پیام خطای اسکریپت در مرورگر (IE) ظاهر می شود. اگر وضعیت منزوی است، پس نباید نگران باشید، اما زمانی که چنین خطاهایی عادی می شوند، پس باید به ماهیت این مشکل فکر کنید.

خطای اسکریپت در اینترنت اکسپلورر معمولاً به دلیل عدم مدیریت صحیح کد صفحه HTML توسط مرورگر، وجود فایل های موقت اینترنت، تنظیمات حساب و بسیاری از دلایل دیگر ایجاد می شود. به آن پرداخته خواهد شددر این مواد روش هایی برای حل این مشکل نیز در نظر گرفته خواهد شد.

قبل از ادامه روش‌های رایج برای تشخیص مشکلات اینترنت اکسپلورر که باعث خطای اسکریپت می‌شوند، باید مطمئن شوید که خطا نه تنها در یک سایت خاص، بلکه در چندین صفحه وب به طور همزمان رخ می‌دهد. همچنین باید صفحه وب را که مشکل در آن رخ می دهد تحت صفحه دیگری بررسی کنید حساب، در یک مرورگر دیگر و در رایانه دیگری. این کار جستجوی علت خطا را محدود می‌کند و این فرضیه را که پیام‌ها در نتیجه وجود فایل‌ها یا تنظیمات خاص در رایانه شخصی ظاهر می‌شوند حذف یا تأیید می‌کند.

مسدود کردن اسکریپت های فعال اینترنت اکسپلورر، اکتیو ایکس و جاوا

اسکریپت‌نویسی فعال، کنترل‌های ActiveX و جاوا بر نحوه تولید و نمایش اطلاعات در سایت تأثیر می‌گذارند و در صورت مسدود شدن آنها در رایانه شخصی کاربر، می‌توانند علت واقعی مشکل توصیف شده قبلی باشند. برای اطمینان از اینکه خطاهای اسکریپت به همین دلیل رخ می دهد، فقط باید تنظیمات امنیتی مرورگر را بازنشانی کنید. برای انجام این کار، دستورالعمل های زیر را دنبال کنید.

• اینترنت اکسپلورر 11 را باز کنید
• سرویس

• در پنجره، به برگه بروید ایمنی
• بعد روی دکمه کلیک کنید پیش فرضو سپس دکمه خوب

فایل های موقت اینترنت اکسپلورر

هر بار که یک صفحه وب را باز می کنید، اینترنت اکسپلورر یک کپی محلی از این صفحه وب را در رایانه شخصی شما در فایل های به اصطلاح موقت ذخیره می کند. هنگامی که تعداد این فایل ها بسیار زیاد است و اندازه پوشه حاوی آنها به چندین گیگابایت می رسد، ممکن است مشکلاتی در نمایش صفحه وب رخ دهد، یعنی یک پیام خطای اسکریپت ظاهر می شود. پاک کردن منظم پوشه فایل های موقت می تواند به رفع این مشکل کمک کند.
برای حذف فایل های موقت اینترنتی مراحل زیر را دنبال کنید.

• اینترنت اکسپلورر 11 را باز کنید
• سرویس
• در پنجره، به برگه بروید معمول هستند
• در فصل تاریخچه مرورگردکمه را فشار دهید حذف…

• در پنجره حذف تاریخچه مرورگر اینترنتیکادرهای کنار آیتم ها را علامت بزنید فایل های موقت اینترنت و وب سایت ها, بیسکویت هاو داده های وب سایت, مجله
• روی دکمه کلیک کنید حذف

کارکرد نرم افزار آنتی ویروس

خطاهای اسکریپت از طریق کار امکان پذیر است برنامه آنتی ویروسهنگامی که اسکریپت های فعال، کنترل های ActiveX و جاوا را در صفحه یا پوشه ها برای ذخیره فایل های موقت مرورگر مسدود می کند. در این مورد، باید به مستندات محصول آنتی ویروس نصب شده مراجعه کنید و پوشه های اسکن را برای ذخیره فایل های موقت اینترنت و همچنین مسدود کردن اشیاء تعاملی غیرفعال کنید.

پردازش نادرست کد صفحه HTML

به عنوان یک قاعده، در یک سایت خاص ظاهر می شود و نشان می دهد که کد صفحه به طور کامل برای کار با اینترنت اکسپلورر سازگار نیست. در این مورد، بهتر است اشکال زدایی اسکریپت را در مرورگر غیرفعال کنید. برای انجام این کار؛ این موارد را دنبال کنید.

• اینترنت اکسپلورر 11 را باز کنید
• در گوشه سمت راست بالای مرورگر، روی نماد کلیک کنید سرویسبه شکل چرخ دنده (یا کلید ترکیبی Alt + X). سپس در منوی باز شده را انتخاب کنید
• در پنجره، به برگه بروید علاوه بر این
• بعد، علامت کادر را بردارید نمایش اعلان برای هر خطای اسکریپتو دکمه را فشار دهید خوب.

این لیستی از بیشترین است علل شایع، که باعث خطای اسکریپت در اینترنت اکسپلورر می شوند، پس اگر از چنین پیام هایی خسته شده اید، کمی دقت کنید و مشکل را یک بار برای همیشه حل کنید.

بر این لحظهتعداد زیادی مرورگر مختلف وجود دارد که استانداردهای HTML موجود را تا حدی پشتیبانی می کنند. من شخصاً مرورگر Mozilla Corporation را ترجیح می دهم. این مرورگر سابقه طولانی دارد (بر اساس مرورگر معروف Netscape Navigator ساخته شده است). من همچنین این مرورگر را دوست دارم زیرا از سیستمی از افزونه ها پشتیبانی می کند - افزونه های توزیع شده جداگانه، هنگام اتصال، می توانید عملکرد را تغییر دهید و آن را مطابق با نیازهای خود سفارشی کنید. و در نهایت، این مرورگر به صورت رایگان با کدهای منبع باز توزیع می شود که این نیز مهم است. بنابراین، تصمیم گرفتم امکاناتی را که این مرورگر نه تنها برای کاربر، بلکه برای توسعه‌دهنده صفحات وب فراهم می‌کند، شرح دهم که فرآیند اشکال‌زدایی محصولات نوشته شده چقدر آسان و راحت است.

موزیلا فایرفاکسیکی از محبوب ترین مرورگرها در بین توسعه دهندگان و توسعه دهندگان وب است. توجه آنها را به دلیل فرصت هایی که این مرورگر برای اشکال زدایی پروژه های ایجاد شده، رفع اشکالات و بهبود فراهم می کند به خود جلب می کند. مرورگر به طور استاندارد با یک کنسول جاوا (یا "کنسول خطا") عرضه می شود. این ابزار به شما امکان می دهد تا اسکریپت های جاوا را اشکال زدایی کنید. اما پلاگین های شخص ثالث عملکرد بسیار بیشتری به مرورگر می دهند که می توانند از وب سایت رسمی بنیاد موزیلا دانلود و نصب شوند. اکنون می‌خواهم به دو مورد از این افزونه‌ها نگاه کنم - Web Developer و Firebug. هر دوی این افزونه ها را می توانید از لینک های بالا از سایت رسمی افزونه دانلود کنید. پس از نصب آنها و راه اندازی مجدد مرورگر، توسعه دهنده فرصت های زیادی دارد که در زیر به نوبه خود برای هر یک از افزونه ها توضیح خواهم داد.

افزونه firebug

همانطور که در صفحه رسمی گفته شد: "Firebug با مرورگر فایرفاکس ادغام می شود تا ابزار توسعه دهنده را تا حد زیادی غنی کند. شما می توانید CSS، HTML و Javascript را به صورت زنده در هر صفحه وب ویرایش، اشکال زدایی و کاوش کنید." و در واقع همینطور است. برخی از عملکردهای این افزونه را در نظر بگیرید:

• مشاهده و ویرایش HTML
• ساخت CSS.
• نظارت بر درخواست شبکه
• اشکال زدایی جاوا اسکریپت
• تحقیق جاوا اسکریپت
• ورود به سیستم برای جاوا اسکریپت

این لیست کاملی از تمام ویژگی های آن نیست. از آنجایی که پروژه منبع باز است، هرکسی می تواند عملکردی را تغییر داده و اضافه کند.

برای کار با افزونه، باید کلید F12 را فشار دهید (Ctrl-F12 برای کار با آن در یک پنجره جداگانه). پس از پرتاب موفقیت آمیز، ما موارد زیر را دریافت می کنیم - شکل 1a، 1b.

شکل 1a. پنجره اولیه افزونه firebug.

شکل 1b. پنجره اولیه افزونه firebug.

در مرحله بعد، کار واقعی با افزونه آغاز می شود. فرض کنید باید این یا آن شی را در کد HTML پیدا کنیم یا مشخص کنیم که دقیقاً چگونه با آن پیاده‌سازی می‌شود با استفاده از CSSقطعه فعلی برای این کار کافیست با ماوس گزینه های لازم را در منوی پنجره افزونه انتخاب کنید. در مثال زیر، این HTML در حالت Inspect است. اکنون، با رفتن به صفحه سند، در زیر نشانگر ماوس متوجه یک ناحیه مستطیل شکل خواهیم شد که در اینجا منطقه ای را که با آن کار می کنیم را نشان می دهد. در پنجره افزونه، پارامترهای HTML و CSS استفاده شده را مشاهده خواهیم کرد. همچنین با کلیک بر روی هر یک از آنها می توانید تغییراتی ایجاد کرده و آنها را به صورت پویا پیگیری کنید. اقدامات توصیف شده در شکل های 2،3،4 نشان داده شده است.

در توسعه این پروژه، پلاگینی که در بالا توضیح داده شد دقیقاً برای این اهداف استفاده شد. با این حال، اگرچه هیچ جاوا اسکریپتی در اینجا استفاده نشده است، از افزونه firebug می توان برای اشکال زدایی آن نیز استفاده کرد. نمونه ای از اشکال زدایی در شکل 5 نشان داده شده است.

در این مورد، همانطور که در بالا توضیح داده شد، عملکرد این افزونه محدود نیست. شما می توانید پس از نصب موزیلا فایرفاکس، آن را به طور کامل مطالعه کرده و با دانلود از لینک های ارائه شده از آن استفاده کنید.

افزونه توسعه دهنده وب

توسعه دهنده وب - افزونه دوم برای مرورگر موزیلافایرفاکس، بسیار قدرتمند و کاربردی است که امکان اشکال زدایی سریع و کارآمد را فراهم می کند. پس از نصب آن، یک نوار ابزار اضافی در پنجره مرورگر ظاهر می شود که در شکل 6 نشان داده شده است.

کار بیشتر با افزونه بصری است. به عنوان مثال، اگر ما نیاز به انجام کار CSS داشته باشیم (البته نه به اندازه افزونه Firebug کاملا کاربردی)، می‌توانیم روی منوی CSS کلیک کرده و غیرفعال، فعال یا غیرفعال کنیم.

برای یک توسعه دهنده بسیار راحت است که بتواند ببیند پروژه او در مانیتورهایی با وضوح های مختلف چگونه به نظر می رسد. برای این کار از تب Resize استفاده کنید. در اینجا می توانید به صورت دستی تنظیم کنید مجوزهای لازمصفحه نمایش (800x600، 1024x768، و غیره)، و سپس آزادانه بین آنها سوئیچ کنید، بزرگنمایی یا کوچکنمایی محتوا را انجام دهید. این قابلیت در شکل 7 نشان داده شده است.

این افزونه همچنین دارای قابلیت های غنی است که همگی در سایت های رسمی توضیح داده شده و در دسترس هستند.

فهرست منابع استفاده شده

• 1. www.getfirebug.com
  وب سایت رسمی افزونه.
• 2. http://addons.mozilla.org
  افزونه های میزبانی وب سایت رسمی موزیلا برای مرورگر فایرفاکس، اطلاعات برای توسعه دهندگان، اطلاعات در مورد استفاده از افزونه ها.
• 3. http://chrispederick.com/work/web-developer/
  وب سایت رسمی توسعه دهنده افزونه WebDeveloper.

ممکن است اینترنت اکسپلورر هنگام مرور اینترنت، پیام هایی را نشان دهد که صفحه دارای خطا است و ممکن است به درستی نمایش داده نشود. بیایید به چند روش برای رفع این مشکل نگاه کنیم.

دستورالعمل

اگر هیچ مشکل قابل مشاهده ای در مرورگر وجود ندارد، به جز یک خطای متناوب، می توانید اشکال زدایی اسکریپت را خاموش کنید تا پیام دوباره ظاهر نشود (اگر خطا در بیش از یک سایت، اما در چندین سایت به طور همزمان ظاهر شد، ادامه دهید. به مرحله بعد). از منوی Tools، Internet Options را باز کنید، تب Advanced را انتخاب کنید و کادر کنار Prevent script debugging را علامت بزنید. اگر می خواهید اعلان همه خطاها را خاموش کنید، علامت کادر "نمایش اعلان هر خطای اسکریپت" را بردارید.

سعی کنید سایتی را که باعث خطا شده است را هنگام مرور از یک حساب دیگر یا از رایانه دیگری باز کنید تا ببینید آیا مشکل محلی است یا خیر. اگر خطا ظاهر شد، به احتمال زیاد ناشی از کد صفحه وب نادرست است. در این صورت، می توانید با دنبال کردن دستورالعمل های مرحله قبل، اشکال زدایی اسکریپت را غیرفعال کنید. اگر هنگام مرور سایت با استفاده از رایانه یا حساب دیگری مشکل برطرف شد، به مرحله بعدی ادامه دهید.

این امکان وجود دارد که اینترنت اکسپلورر اسکریپت های فعال، جاوا و اکتیو ایکس را که نمایش اطلاعات روی صفحه را در زمان مرور تعیین می کنند، مسدود نکند. برای رفع مشکل، باید تنظیمات امنیتی مرورگر خود را بازنشانی کنید. برای انجام این کار، در منوی "ابزار"، "گزینه های اینترنت" را انتخاب کنید و به تب "امنیت" بروید. روی دکمه "پیش فرض" و سپس "OK" کلیک کنید. اگر پس از راه‌اندازی مجدد صفحه‌ای که باعث خطا شد، مشکل همچنان ادامه داشت، روش بعدی را امتحان کنید.

همانطور که می دانید مرورگر فایل های موقت و کپی صفحات را در یک پوشه جداگانه برای دسترسی بعدی به آنها ذخیره می کند. اگر اندازه پوشه خیلی بزرگ شود، برخی از صفحات ممکن است خطاهایی را نشان دهند. مشکل را می توان با پاک کردن دوره ای پوشه فایل های موقت حل کرد. برای انجام این کار، کادر گفتگوی Internet Options را از منوی Tools باز کنید. در تب General، در گروه History، روی دکمه Delete کلیک کنید. کادرهای مربوط به فایل‌های موقت اینترنت، کوکی‌ها، تاریخچه، داده‌های فرم وب را علامت بزنید و روی OK کلیک کنید.

اغلب، کاربران می توانند وضعیتی را مشاهده کنند که در آن یک پیام خطای اسکریپت در مرورگر اینترنت اکسپلورر (IE) ظاهر می شود. اگر وضعیت منزوی است، پس نباید نگران باشید، اما زمانی که چنین خطاهایی عادی می شوند، پس باید به ماهیت این مشکل فکر کنید.

خطای اسکریپت در اینترنت اکسپلورر معمولاً به دلیل عدم پردازش صحیح کد صفحه HTML توسط مرورگر، وجود فایل های موقت اینترنت، تنظیمات حساب کاربری و بسیاری از دلایل دیگر است که در این مطلب به آنها اشاره خواهد شد. روش هایی برای حل این مشکل نیز در نظر گرفته خواهد شد.

قبل از ادامه روش‌های رایج برای تشخیص مشکلات اینترنت اکسپلورر که باعث خطای اسکریپت می‌شوند، باید مطمئن شوید که خطا نه تنها در یک سایت خاص، بلکه در چندین صفحه وب به طور همزمان رخ می‌دهد. همچنین باید صفحه وب را که این مشکل را در حساب دیگری، مرورگر دیگری و رایانه دیگری تجربه می‌کند، بررسی کنید. این کار جستجوی علت خطا را محدود می‌کند و این فرضیه را که پیام‌ها در نتیجه وجود فایل‌ها یا تنظیمات خاص در رایانه شخصی ظاهر می‌شوند حذف یا تأیید می‌کند.

مسدود کردن اسکریپت های فعال اینترنت اکسپلورر، اکتیو ایکس و جاوا

اسکریپت‌نویسی فعال، کنترل‌های ActiveX و جاوا بر نحوه تولید و نمایش اطلاعات در سایت تأثیر می‌گذارند و در صورت مسدود شدن آنها در رایانه شخصی کاربر، می‌توانند علت واقعی مشکل توصیف شده قبلی باشند. برای اطمینان از اینکه خطاهای اسکریپت به همین دلیل رخ می دهد، فقط باید تنظیمات امنیتی مرورگر را بازنشانی کنید. برای انجام این کار، دستورالعمل های زیر را دنبال کنید.

• اینترنت اکسپلورر 11 را باز کنید
• سرویس

• در پنجره، به برگه بروید ایمنی
• بعد روی دکمه کلیک کنید پیش فرضو سپس دکمه خوب

فایل های موقت اینترنت اکسپلورر

هر بار که یک صفحه وب را باز می کنید، اینترنت اکسپلورر یک کپی محلی از این صفحه وب را در رایانه شخصی شما در فایل های به اصطلاح موقت ذخیره می کند. هنگامی که تعداد این فایل ها بسیار زیاد است و اندازه پوشه حاوی آنها به چندین گیگابایت می رسد، ممکن است مشکلاتی در نمایش صفحه وب رخ دهد، یعنی یک پیام خطای اسکریپت ظاهر می شود. پاک کردن منظم پوشه فایل های موقت می تواند به رفع این مشکل کمک کند.
برای حذف فایل های موقت اینترنتی مراحل زیر را دنبال کنید.

• اینترنت اکسپلورر 11 را باز کنید
• در گوشه سمت راست بالای مرورگر، روی نماد کلیک کنید سرویسبه شکل چرخ دنده (یا کلید ترکیبی Alt + X). سپس در منوی باز شده را انتخاب کنید
• در پنجره، به برگه بروید معمول هستند
• در فصل تاریخچه مرورگردکمه را فشار دهید حذف…

• در پنجره حذف تاریخچه مرورگر اینترنتیکادرهای کنار آیتم ها را علامت بزنید فایل های موقت اینترنت و وب سایت ها, کوکی ها و داده های وب سایت, مجله
• روی دکمه کلیک کنید حذف

کارکرد نرم افزار آنتی ویروس

هنگامی که یک برنامه آنتی ویروس اسکریپت های فعال، کنترل های ActiveX و جاوا را در یک صفحه یا پوشه ها برای ذخیره فایل های موقت مرورگر مسدود می کند، خطاهای اسکریپت از طریق عملکرد یک برنامه آنتی ویروس امکان پذیر است. در این مورد، باید به مستندات محصول آنتی ویروس نصب شده مراجعه کنید و پوشه های اسکن را برای ذخیره فایل های موقت اینترنت و همچنین مسدود کردن اشیاء تعاملی غیرفعال کنید.

پردازش نادرست کد صفحه HTML

به عنوان یک قاعده، در یک سایت خاص ظاهر می شود و نشان می دهد که کد صفحه به طور کامل برای کار با اینترنت اکسپلورر سازگار نیست. در این مورد، بهتر است اشکال زدایی اسکریپت را در مرورگر غیرفعال کنید. برای انجام این کار؛ این موارد را دنبال کنید.

• اینترنت اکسپلورر 11 را باز کنید
• در گوشه سمت راست بالای مرورگر، روی نماد کلیک کنید سرویسبه شکل چرخ دنده (یا کلید ترکیبی Alt + X). سپس در منوی باز شده را انتخاب کنید
• در پنجره، به برگه بروید علاوه بر این
• بعد، علامت کادر را بردارید نمایش اعلان برای هر خطای اسکریپتو دکمه را فشار دهید خوب.

این لیستی از رایج ترین دلایلی است که باعث ایجاد خطاهای اسکریپت در اینترنت اکسپلورر می شود، بنابراین اگر از چنین پیام هایی خسته شده اید، کمی دقت کنید و مشکل را یک بار برای همیشه حل کنید.

البته موارد دیگری نیز وجود دارد - من قطعاً به آنها اشاره خواهم کرد.

فایرباگ برای فایرفاکس

من مطمئن نیستم که آیا آتش سوزیمولد دیگر ابزارهای توسعه دهنده است، اما قطعاً محبوب ترین، کاربرپسندترین و پر از ویژگی هاست.

Firebug یک افزونه برای فایرفاکس است، به این معنی که باید از سایت افزونه های فایرفاکس دانلود و نصب شود.

برای فراخوانی فایرباگ کافیست F12 را فشار دهید.

ویژگی های این افزونه:

• بازرسی و ویرایش HTML به صورت پویا.
• ویرایش CSS در پرواز.
• اشکال زدایی جاوا اسکریپت، خط فرمان برای اجرای اسکریپت ها.
• نظارت بر درخواست های شبکه - می توانید اندازه و زمان دانلود فایل ها و اسکریپت ها، هدر درخواست ها را مشاهده کنید.
• تجزیه کننده DOM.

شما می توانید برای مدت طولانی در مورد این ویژگی ها با جزئیات صحبت کنید، اما من فکر می کنم که آنها برای همه خوانندگان ما شناخته شده هستند و اگر نه، اطلاعات دقیق در صفحه اصلی Firebug یا همان ترجمه ایلیا کانتور است.

علاوه بر خود فایرباگ، ممکن است به یک لوسیون مفید برای آن نیاز داشته باشید - شیرینی آتشین، که با آن (تعجب:-) می توانید کوکی ها را مشاهده و اصلاح کنید.

نوار ابزار برنامه نویس WEB برای فایرفاکس

یکی دیگر از افزودنی های مفید به Ognelis. به نظر می رسد این است:

اجازه دهید از طریق نقاط.

غیر فعال کردن

به شما امکان می دهد جاوا اسکریپت را خاموش کنید، استفاده از حافظه پنهان را غیرفعال کنید، که در توسعه بسیار مفید است (به شما امکان می دهد مطمئن شوید که صفحه با آخرین به روز رسانی بارگذاری شده است)، رنگ های استفاده شده در صفحه را لغو کنید و آنها را با رنگ های استاندارد جایگزین کنید. ارسال در هدر ارجاع دهنده (صفحه ای که انتقال از آن انجام شده است) را غیرفعال کنید.

بیسکویت ها

یک گزینه مفید برای کار با کوکی ها: آنها را می توان مشاهده، حذف، مسدود و اضافه کرد.

css

این منو جالب‌ترین ویژگی نوار ابزار توسعه‌دهنده - ویرایش سریع CSS را در خود دارد. علاوه بر این امکان مشاهده css، غیر فعال کردن و غیره و غیره وجود دارد. به نظر من، وجود میانبرهای صفحه کلید در اینجا بسیار مفید است (برای مثال CTRL + SHIFT + C به شما امکان می دهد بلافاصله به مشاهده سبک های صفحه بروید)

تشکیل می دهد

همه چیز برای کار با فرم ها: نمایش رمزهای عبور، نمایش اطلاعات در مورد فرم ها، تبدیل روش های فرم (GET »POST و بالعکس) و موارد دیگر. عملکرد مفید «پر کردن فیلدهای فرم» برای پر کردن خودکار فیلدهای فرم (به عنوان مثال، هنگام آزمایش یک سایت در زمانی که عملکرد به خاطر سپردن رمز عبور غیرفعال است. در غیر این صورت، هیچ چیز مفیدی در این پاراگراف نمی بینم.

تصاویر

یک عملکرد مفید برای خاموش کردن تصاویر وجود دارد - برای اینکه ببینید سایت شما بدون تصاویر چگونه به نظر می رسد. تصاویر را می توان دایره کرد، اندازه آنها را نشان داد، ویژگی های alt را نشان داد.

اطلاعات

این منو گزینه های زیادی دارد. نمایش ویژگی های class و id در صفحه می تواند مفید باشد. علاوه بر این، مورد "نمایش اطلاعات رنگ" جالب است - برای دریافت سریع اطلاعات در مورد رنگ هایی که در صفحه استفاده می شود. "مشاهده اندازه سند" - اندازه صفحه را مشاهده کنید. "مشاهده سرصفحه های پاسخ" - سرصفحه های صفحه را مشاهده کنید.

متفرقه

پرکاربردترین ویژگی پاک کردن کش است. علاوه بر این، "خط کش صفحه" - خط کش، "صفحه ذره بین" - ذره بین و "راهنماهای خط" - چند خط در اینجا موجود است که می تواند برای اصلاح الگو مفید باشد.

طرح کلی

انتخاب عناصر مختلف صفحه - جداول، سرفصل ها، پیوندها، فریم ها، بلوک ها. تغییر اندازه به شما امکان می دهد اندازه پنجره مرورگر را به گونه ای تغییر دهید که با هر پسوند استاندارد صفحه نمایش مطابقت داشته باشد. ابزارها در اینجا ویژگی های ذخیره شده برای اعتبار سنجی صفحه هستند. هم محلی و هم خارجی. دسترسی راحت و سریع به اعتبارسنجی HTML، CSS و موارد دیگر. می توانید از میانبر صفحه کلید CTRL+SHIFT+H برای اعتبارسنجی HTML استفاده کنید.

مشاهده منبع

مشاهده کد منبع امکان مشاهده در اپلیکیشن خارجی، مشاهده کد تولید شده.

سمت راست مورد علاقه من است. این یک اعتبارسنجی سریع HTML، CSS و نشانگر خطای جاوا اسکریپت است. در صورت عدم وجود مشکل، نماد سبز و در صورت وجود مشکل قرمز است.

نوار ابزار توسعه دهنده اینترنت اکسپلورر

شروع از 8.0 اشکال زدایی خطا در حال حاضر در این مرورگر تعبیه شده است. به راحتی نامیده می شود کلید F12. درست است، او به عنوان یک برنامه دهه 90 بدبخت است.

اما ابزار بسیار خنک تری برای این مرورگر وجود دارد که به اصطلاح نوار ابزار توسعه دهنده اینترنت اکسپلورر را می توان از لینک دانلود کرد.

از نظر ظاهر، این نوار ابزار، البته، شبیه فایرباگ است، اما، افسوس، هنوز به آن بزرگ نشده است. اگرچه از طرف دیگر دارای ویژگی هایی است که فایرباگ ندارد. من نوار ابزار توسعه دهنده اینترنت اکسپلورر را ترکیبی از Firebug و توسعه دهنده وب فایرفاکسنوار ابزار.

مانند فایرباگ، بازرسی یک عنصر با یک کلیک ساده امکان پذیر است. اما، اگر بلافاصله بتوانیم بالشتک ها و حاشیه ها را ببینیم، در اینجا چنین امکانی وجود ندارد.

همچنین، نوار ابزار توسعه دهنده اینترنت اکسپلورر مانند Firebug، درخت عنصر را به صورت پویا به روز نمی کند. یعنی اگر با استفاده از js چیزی را در صفحه تغییر دهیم، با استفاده از این نوار ابزار چیزی نخواهیم دید.

از چیزهایی که می توانید لذت ببرید - تغییر سریع CSS (روشی آسان برای یافتن مواردی که باید هک کنید :)، توانایی غیرفعال کردن CSS و تصاویر، توانایی پاک کردن سریع حافظه پنهان و بازی با کوکی ها، دسترسی سریع به اعتبارسنجی.

خوشمزه ترین: یک انتخابگر رنگ داخلی وجود دارد که به شما امکان می دهد با استفاده از قطره چکان هر رنگی را از صفحه دریافت کنید. (برای ff یک افزونه ColorZilla جداگانه وجود دارد).

Debug Debug Bar برای اینترنت اکسپلورر

می توانید DebugBar را برای اینترنت اکسپلورر از لینک داده شده دانلود کنید.

یک پسوند جالب در نوع خود. به عنوان یک پانل اضافی برای مرورگر نصب شده است:

بنا به دلایلی، یک موتور جستجوی داخلی، یک قطره چکان، امکان تغییر اندازه پنجره و دوباره، به دلایلی، امکان ارسال صفحه به یک دوست برای صابون وجود دارد. اگرچه ممکن است مفید باشد. اما نتوانستم از این فرصت استفاده کنم.

علاوه بر این، یک بازرس وجود دارد:

روش بازرسی با کلیک یا اشاره برای توسعه دهندگان مناسب نبود: آنها به چیز جالب تری رسیدند. در DebugBar، باید هدف را به عنصر مورد نظر بکشید تا آن را در درخت ببینید. هیچ گزینه ای برای ویرایش CSS وجود ندارد. اما یک اعتبار سنجی و یک کنسول داخلی js وجود دارد.

و اگر تنظیمات را جستجو کنید، می توانید این را پیدا کنید:

هم خنده دار و هم غمگین.

مشخص است که Developer Toolbar در اکسپلورر هشتم ساخته خواهد شد. مشابه آنچه در پاراگراف سوم توضیح داده شده است، اما امیدواریم که بهتر باشد.

Debug DragonFly برای Opera

DragonFly از نسخه 9.5 در Opera تعبیه شده است، بنابراین نیازی به نصب آن نیست. برای فعال کردن Dragonfly به Tools → Advanced → Developer Tools بروید. و اگر به زبان انگلیسی است، ابزارها → پیشرفته → ابزارهای توسعه دهنده.

من بلافاصله به شما هشدار می دهم که DragonFly در مرحله Alpha2 است، این موضوع بسیاری از اشکالات آن را توضیح می دهد.

لیست امکانات:

• بازرس DOM؛
• بر روی Inspection کلیک کنید (دوباره، ما padding را مانند فایرفاکس نخواهیم دید).
• ویرایش ؛
• دسترسی سریع به کنسول خطا

DF چیزی شبیه به یک صفحه جداگانه در یک قاب است. اگر آن را باز کنید، برای همه تب ها باز می شود (برخلاف فایرباگ). بنابراین، قبل از بررسی یک عنصر، باید صفحه مورد نظر خود را از لیست انتخاب کنیم.

متأسفانه، در اینجا، مانند اینترنت اکسپلورر، نوار ابزار Dav عناصر ایجاد شده به صورت پویا را نمایش نمی دهد. و به طور کلی، وقتی صفحه را بررسی می کنیم، هیچ جاوا اسکریپتی اجرا نمی شود: پیوندها و دکمه ها کلیک نمی شوند. بیایید امیدوار باشیم که وقتی DragonFly به انتشار نزدیک می شود، همه این ویژگی ها را ببینیم.

اشکال زدایی WEB Inspector در سافاری

من فوراً در مورد مرورگر خواهم گفت سافاریمن اطلاعات را سوت زدم، بنابراین، همانطور که می گویند، مسئولیتی در قبال کفایت مطالب ندارم.

برای فعال کردن مورد "توسعه" در منوی سافاری، باید مورد مربوطه را در تنظیمات فعال کنید (برگه "پیشرفته"):

توابع زیر در منوی "توسعه" در دسترس ما هستند:

بیایید نگاهی دقیق تر به بازرس WEB بیندازیم:

به طور پیش فرض، بازرس در حالت نمایش HTML باز می شود. اما می توان آن را به حالت نمایش DOM تغییر داد. برای انجام این کار، یک سوئیچ در صفحه بالایی وجود دارد. هنگامی که ماوس را روی یک عنصر در بازرس قرار می دهید، در خود صفحه برجسته می شود. شما نمی توانید padding را مشاهده کنید، نشانه گذاری یا CSS را تغییر دهید، یا تغییرات پویا در DOME را در لحظه مشاهده کنید، همانطور که در FireBug نمی توانید مشاهده کنید. اما، ببینید، به نظر می رسد بسیار زیبا است.

اگر می خواهید با بازرس در پنجره مرورگر کار کنید، می توانید روی دکمه در گوشه پایین سمت چپ کلیک کنید.

حتی در سافاری، عملکردی مانند "خط زمانی شبکه" در دسترس است (دکمه "شبکه" در بازرس):

شما به وضوح می توانید ببینید که فایل ها چه زمانی و چه مدت بارگذاری می شوند. شما همچنین می توانید سرصفحه های درخواست را مشاهده کنید، اما، متأسفانه، نمی توانید خود محتوا را مشاهده کنید.

اشکال زدایی برای توسعه دهندگان در گوگل کروم

لم در یک فرم پیشرفته به دنیا آمد و او بلافاصله، هرچند در حال حاضر کج، اما همچنان ابزارهایی برای توسعه دهندگان دارد.

• بازرس DOM؛
• دیباگر جاوا اسکریپت؛
• کنسول جاوا اسکریپت

به منظور بررسی یک عنصر، روی آن کلیک راست کرده و "View element code" را در منوی زمینه انتخاب کنید:

عملکرد مانند سافاری است: عناصر در شناور برجسته می شوند، اما ویرایش CSS و HTML در دسترس نیست، تغییرات در DOM ردیابی نمی شوند. فقط، دکمه در گوشه پایین سمت چپ، که باید بازرس را به پنجره مرورگر متصل کند، کار نمی کند.

در تب "منابع" موارد زیر را مشاهده می کنیم:

کمی با مقیاس در سافاری متفاوت است. Translucent در این نمودار اندازه فایل نسبی است و رنگ کامل زمان دانلود است. به هر حال، بدیهی است که این بخش از کروم هنوز تا تکمیل شدن فاصله دارد.

در این مقاله معروف ترین افزونه ها و ابزارهای داخلی مرورگرها را بررسی کردم.

موارد دیگری نیز وجود دارد، به عنوان مثال:

• Internet Explorer WEB Development Helper یک کمک کننده خوب برای توسعه دهندگان ASP.NET (Internet Explorer) است.
• WEB Developer Toolbar - نوار ابزار اینترنت اکسپلورر و فایرفاکس. چندین ویژگی مفید وجود دارد.
• نوار ابزار دسترسی به وب - نوار ابزار برای اینترنت اکسپلورر. هیچ چیز جالبی نیست

اگر افزونه هایی وجود دارد که من به آنها اشاره نکردم، اما ارزشش را دارند، یا عملکردهایی برای افزونه های ذکر شده وجود دارد که از قلم انداختم، بنویسید.

برای سلامتی استفاده کنید!

اینترنت اکسپلورر 11 در ویندوز 8.1 و ویندوز 7 با مجموعه ای کاملاً بازطراحی شده و بهبود یافته از ابزارهای توسعه دهنده تعبیه شده در مرورگر ارائه می شود تا به توسعه دهندگان کمک کند تا وب سایت ها و برنامه های مدرن را در بسیاری از دستگاه ها ایجاد، تشخیص و بهینه سازی کنند. ابزارهای جدید که ما به خاطر اختصار از آنها به سادگی به عنوان F12 یاد می کنیم، به توسعه دهندگان وب اجازه می دهد تا به سرعت و کارآمد کار کنند.

گروه‌های کاری ویژوال استودیو و اینترنت اکسپلورر برای ایجاد ابزارهای F12 که بر اساس اصل کمک به توسعه‌دهندگان با استفاده از داده‌های معنی‌دار به سرعت از مشکلی به راه‌حل دیگر حرکت کنند، همکاری کردند. مجموعه جدید F12 یک تجربه وب سریع و منعطف را با ابزارهایی برای تشخیص و رفع مشکلات عملکرد، و همچنین ابزارهایی برای کمک به درک بهتر اینکه اینترنت اکسپلورر چگونه برنامه‌های کاربردی وب را طراحی و ارائه می‌کند، ارائه می‌کند. ابزارهای F12 از گردش کار سریع و تعاملی که توسط توسعه دهندگان وب امروزی استفاده می شود پشتیبانی می کند.

مجموعه جهانی ابزار

مجموعه جدید F12 به توسعه دهندگان کمک می کند تا به سرعت از مشکلی به راه حل دیگر حرکت کنند. برخی از ویژگی های جدید هیجان انگیز عبارتند از:

• تجزیه و تحلیل پاسخ UI و ابزارهای پروفایل حافظه برای کمک به توسعه دهندگان در ساخت برنامه های کاربردی وب سریع و انعطاف پذیر.
• اکسپلورر زنده DOM و جستجوگر CSS با صفحه به‌روزرسانی شدند تا توسعه‌دهندگان بتوانند به طور تعاملی چگونگی تأثیر محتوای پویا بر طرح‌بندی و استایل را بررسی کنند.
• قابلیت اشکال زدایی جاوا اسکریپتی که به سرعت بدون بازخوانی صفحه راه اندازی می شود تا توسعه دهندگان بتوانند سریعتر به کار خود ادامه دهند.

همانطور که از ابزارهای F12 استفاده می کنید، بسیاری از پیشرفت های دیگر را مشاهده خواهید کرد که به شما در دستیابی به یک گردش کاری سریع و تعاملی کمک می کند:

• دسترسی سریع به این ابزارها با کلیک راست روی یک آیتم منو با "مورد بازرسی"
• تعامل کارآمد با صفحه کلید
• توانایی گسترده برای کپی کردن عناصر و اجزای ابزارها، به طوری که می توان آنها را بدون قالب بندی اضافی در هر ویرایشگر جایگذاری کرد.

مهمتر از همه، این ابزارها اکنون کامل ترین و دقیق ترین اطلاعات موجود، از @media و قوانین!important در DOM Explorer تا ساختار هزینه هر عنصر را در نمایه پاسخ UI نمایش می دهند. این ابزارها همچنین داده‌های مستقیم معنی‌داری را ارائه می‌دهند. برای مثال، نمایه‌گر حافظه، گره‌های DOM را شناسایی می‌کند که "زنده" هستند اما از نشانه‌گذاری یا درخت رندر ارجاع نشده‌اند.

قابلیت‌های مجموعه جدید F12 در ویژوال استودیو نیز موجود است، بنابراین توسعه‌دهندگان تجربه‌ای ثابت و یکپارچه در تمامی ابزارها و پلتفرم‌های توسعه وب ما دارند.

بیایید اکنون نگاهی گذرا به این ابزارها در عمل بیاندازیم.

پروفایل کردن برنامه ها با تحلیلگر پاسخگویی UI

ابزار پاسخگویی UI به شما کمک می کند تا بفهمید زمان CPU در کجا صرف می شود تا برنامه شما بتواند به پتانسیل عملکرد کامل خود دست یابد. این ابزار بینش لازم را برای درک عملکرد درونی اینترنت اکسپلورر به شما می دهد، تجسم زمان اجرا کدهای HTML، CSS و جاوا اسکریپت و همچنین عوارض جانبی مهمی مانند نشانه گذاری و جمع آوری زباله را ارائه می دهد. در یک نگاه، می‌توانید متوجه شوید که اپلیکیشن شما چقدر سریع پاسخگو است و چگونه رندر می‌شود. این به شما امکان می دهد منابع خاصی را شناسایی کنید تنگناهاو رویکردی هوشمندانه تر برای بهینه سازی آن.

پروفایل وب سایت

استفاده از حافظه برنامه را با نمایه‌گر حافظه آنالیز کنید

این آنالایزر حافظه به شما کمک می کند از نشت حافظه یا مصرف بیش از حد حافظه جلوگیری کنید. ایجاد برنامه های کاربردی وب که برای مشتریان شبانه روزی یا پیچیده کار می کنند برنامه های کاربردی تعاملیاغلب به این معنی است که توسعه دهنده آنها باید توجه ویژه ای به مسائل مربوط به استفاده از حافظه داشته باشد.

در حالی که جاوا اسکریپت یک محیط جمع‌آوری‌شده زباله است، برنامه‌ها معمولاً حافظه بیشتری مصرف می‌کنند، فقط به این دلیل که مراجع شیء آزاد نشده‌اند (و نمی‌توانند) آزاد شوند. تحلیلگر حافظه با ارائه اطلاعات در مورد هر شیء موجود در صفحه، خواه یک شی جاوا اسکریپت یا DOM باشد، به شما کمک می کند تا این مسائل را شناسایی کنید. با این اطلاعات می توانید برای مثال ببینید که یک عنصر چقدر حافظه دارد و چه اشیایی از ماندگاری آن پشتیبانی می کنند. اما مهمتر از همه، می توانید دو عکس فوری را با هم مقایسه کنید و ببینید چه چیزی تغییر کرده است. این به شما امکان می دهد بفهمید که چرا برنامه شما از حافظه بیشتری استفاده می کند و این وضعیت را اصلاح کنید.

عکس فوری پشته ای که عناصر DOM غیرفعال را نشان می دهد

با استفاده از داشبورد عملکرد، درک سریعی از عملکرد برنامه به دست آورید

برای کمک به شناسایی سریع مسائلی که بر عملکرد صفحه شما تأثیر می گذارد، اینترنت اکسپلورر 11 یک ویجت «صفحه» به نام داشبورد عملکرد ارائه می کند که با استفاده از میانبر صفحه کلید Ctrl+Shift+U یا آیتم منوی ابزار مربوطه (Alt+T) قابل دسترسی است. ). این پانل به صورت پویا آمار را در اینترنت اکسپلورر برای معیارهای عملکرد کلیدی مانند زمان رندر، حافظه، فریم در ثانیه (fps) و استفاده از CPU نمایش می دهد. داشبورد عملکرد نیازی به استفاده از ابزار F12 ندارد و همچنین می تواند در مرورگرهای مدرن استفاده شود.

با داشبورد عملکرد، می‌توانید به سرعت تعاملات صفحه‌ای را که باعث کاهش نرخ فریم یا مصرف بالای CPU می‌شوند، شناسایی کنید. سپس می توانید برای بازتولید مشکل و یافتن راه حل به F12 بروید.

بررسی عناصر و اصلاح نشانه گذاری و سبک ها با استفاده از DOM Explorer

DOM Explorer تنظیم تعاملی پرس و جوهای رسانه @ و قوانین CSS و ویژگی های آنها را آسان می کند. از همین رو رابط کاربریبرنامه شما به یک رابط چند دستگاهی بسیار پاسخگو تبدیل می شود. شما می توانید با کلیک راست و بررسی عنصر مورد نظر، به سرعت در یک صفحه وب شروع کنید، که ابزارهای F12 را به همراه آن عنصر انتخاب شده در DOM Explorer اجرا می کند و به صورت پویا DOM و قوانین CSS اعمال شده را نمایش می دهد. جداول DOM و CSS رندر شده پویا هستند و به شما این امکان را می‌دهند که بفهمید اینترنت اکسپلورر چگونه ویژگی‌های نشانه‌گذاری، سبک‌های CSS و قوانین شما را تفسیر می‌کند. همانطور که با استفاده از DOM Explorer با صفحه ارتباط برقرار می کنید یا آن را تغییر می دهید، تغییراتی که ایجاد می کنید بلافاصله نمایش داده می شوند.

نشانه گذاری و سبک ها را بررسی کنید

DOM Explorer هنگام ایجاد تغییرات در جدول CSS، بدست آوردن مقدار صحیح یک ویژگی یا ویژگی ها را با استفاده از IntelliSense آسان می کند. شما به راحتی می توانید ببینید کدام ویژگی ها اشتباه یا ناشناخته هستند و سپس قانون را کپی کنید تا دوباره آن را در منبع خود اعمال کنید.

اشکال زدایی جاوا اسکریپت با دیباگر و کنسول

اشکال‌زدای جدید جاوا اسکریپت ابزارهایی را در اختیار شما قرار می‌دهد تا کدهای نامعتبر را بیابید و سریع آن را برطرف کنید. دیباگر جاوا اسکریپت می تواند چندین فایل را باز کرده و مشاهده کند، حتی اگر کتابخانه اسکریپت شما کوچک شده باشد، نقاط شکست و نقاط ردیابی را تنظیم کند، اشیاء جاوا اسکریپت، مقادیر، زنجیره های محدوده را بررسی کند، و محتویات پشته را مشاهده کند. اجرای ابزارهای F12 همچنین فوراً دیباگر جاوا اسکریپت را راه اندازی می کند، بنابراین می توانید بلافاصله شروع به کار کنید.

هنگام اشکال زدایی، احتمالاً می خواهید با وب سایت خود تعامل داشته باشید. کنسول ابزار کلیدی برای این کار است. شما می توانید در هر زمان به کنسول دسترسی داشته باشید، که استفاده از این محیط تعاملی با IntelliSense و رندرهای اشیا را کارآمد می کند. این کنسول همچنین طیف گسترده‌ای از APIهای تخصصی را ارائه می‌کند که به شما امکان می‌دهد خروجی را ثبت کنید، میزان زمان صرف شده در کد خاص را تجزیه و تحلیل کنید، و زمانی که نیاز به بازرسی عمیق از اشیاء جاوا اسکریپت دارید، رندرکننده‌های شی را ارائه دهید.

جمع بندی

این پست وبلاگ به سادگی شامل طرحی از توضیحات عناصر جدید در ابزار F12 است. میتونی پیدا کنی لیست کاملجدید عملکرددر مقاله «چیزهای جدید در ابزارهای F12» و در «راهنمای برنامه‌نویس پیش‌نمایش اینترنت اکسپلورر 11» در دسترس توسعه‌دهندگان اینترنت اکسپلورر 11 است. همچنین می‌توانید در نسخه آزمایشی اینترنت اکسپلورر، «F12 Adventure» اطلاعات بیشتری کسب کنید.

ما مشتاقانه منتظر نظرات شما هستیم و مشتاقانه منتظر یک همکاری طولانی با جامعه توسعه دهندگان هستیم. پیشنهادات خود را از طریق ابزار بازخورد و پیشنهاد در Internet Explorer 11 یا در سایت Connect به اشتراک بگذارید.

پی جی هاف
، معاون ویژوال استودیو