اگر شما در زمینه طراحی وب سایت و برنامههای کاربردی تحت وب فعالیت دارید حتماً با ابزارهایی مانند Firebug آشنا هستید. معمولاً فرآیند بررسی مشکلات رابط کاربری و موضوعات مشابه آن بصورت زیر بوده است:
توجه داشته باشید که یک صفحه وب که در مرورگر به نمایش در میآید، برآیند فایلهای جاوا اسکریپت، شیوه نامه ها، User control ها، صفحات ASPX و Master Pageها و ... است. افزون بر این آنچه در مرورگر نمایش داده میشود با چیزی که ما در محیط طراحی (Visual Studio.NET (Design View میبینیم متفاوت است.
تمام مشکلات و سختیهای بالا دست به دست هم دادند تا در نسخه جدید نرم افزار Visual Studio.NET شاهد ابزار جادویی با عنوان Page Inspector باشیم.
این ابزار بصورت Real-time امکان نگاشت (mapping) عناصر موجود در نتیجه نهایی برنامه وب را با سورس کد مهیا میکند. بدین معنا توسط Page Inspector با حرکت ماوس روی عناصر صفحه در مرورگر، Visual Studio.NET بخشی را که آن عنصر را تولید کرده است (User Control, Master Page, View, و ...) نمایش میدهد و شما میتوانید بلافاصله پس از اعمال تغییرات جدید بر روی سورس کد، نتیجه را روی مرورگر ببنید. البته عکس این موضوع نیز صادق است و شما میتوانید با حرکت در سورس کد، نتیجه بصری و عناصر HTML ی که در نتیجه تولید میشوند را مشاهده کنید. (عناصر متناظر به حالت Select در میآیند.)
از دیگر قابلیتهای این ابزار نمایش CSSهای متناظر هر عنصر است. شما میتوانید هر یک از قوانینی که در Style هر عنصر تعریف کرده اید را فعال و یا غیر فعال کنید. همچنین امکان ویرایش آنها وحود دارد.
همچنین از طریق گزینه File میتوان لیست تمام فایلهای سورس صفحه را مشاهده کرد.
با وجود چنین ابزاری یقیناً داشتن دو مانیتور برای برنامه نویسان و توسعه دهندگان وب کاملاً حیاتی است. چراکه Visual Studio.NET به شما این امکان را میدهد تا Page Inspector را در یک مانیتور و نمای سورس را در مانیتور دیگر به نمایش در آورید.
نکته:
جهت استفاده از تمام امکانات این ابزار باید دستور زیر را در تگ appsettings فایل web.config اضافه کنید:
<add key="VisualStudioDesignTime:Enabled" value="true" />
پیشنهاد میکنم برای درک بهتر این ابزار و آشنایی با آن ویدئو مربوطه در کانال 9 را از دست ندهید.