فیلم آموزش تجزیه و تحلیل یک صفحه وب توسط ابزار Inspect Element

1364 روز پیش

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

این ابزار که از اون میشه با نام Opera Dragonfly هم یاد کرد، ابزاری قدرتمند برای بررسی یک صفحه وب است. در واقع Inspect Element یکی از ویژگی های Opera Dragonfly است. به مطلبی که برای توضیح ویژگی پرواز اژدهای اپرا در سایت رسمی اومده نگاهی بندازید.opera dragonfly

Opera Dragonfly is a fully featured development and debugging tool integrated into the Opera browser. It requires no additional installation or setup and works across most of Opera’s browsers – on desktop, mobile phones, tablets and even web-enabled TVs and set-top boxes.

As the power of the Open Web platform increases, high quality tools such as Opera Dragonfly ease the development process. The various tools explained in this guide cover the full debugging workflow, from inspecting network access and downloaded resources, to debugging JavaScript issues and how CSS rules apply to the DOM. Support is included for debugging the very latest technologies, from SVG to HTML5 APIs. For lovers of the command line, a Console HUD can be brought up at any time in the debugging process to interact with the document. There has never been a better excuse to banish JavaScript alert debugging to the past.

برای استفاده این قابلیت چند روش وجود دارد که به تناسب شرایط از یکی از اون ها می تونید استفاده کنید.

  • کلیک راست روی صفحه و انتخاب Inspect Element از منوی بازشده
  • از طریق مسیر Page > Developer Tools > Opera Dragonfly
  • استفاده از کلیدهای میانبر و ترکیبی  Ctrl + Shift + I

opera inspect element

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

  • قابلیت دوست داشتنی speeddial که فوق العادس و کروم یه کپی ازش زده
  • نمایش تمام صفحه صفحات وب بدون هیچ کادر اضافه تنها با فشردن F11
  • ویژگی موس جادویی که با نگه داشتن کلیک راست موس حتما چک کنیدش
  • Ctrl+Z اش که عالیه، اگه تبی رو اشتباهی بستین با Ctrl+Z دوباره بازش کنید!
  • Ctrl+Enter هم که کارش پر کردن فرم های ذخیره شدس که اونم عالیه
  • و …

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

دانلود کنید

فیلم آموزش تجزیه و تحلیل یک صفحه وب

66.6 مگابایت

  1. fateme پاسخ دادن

    دوستون دارم خیلی زیاااااااااااااااااااااد

  2. eiliya پاسخ دادن

    میشه بگین این تغیراتو چطوری میشه ذخیره کرد؟

    • جواد عوض زاده

      سلام. تا اونجایی که من میدونم ذخیره نمیشه کرد. من در صورت نیاز کپی می کنم.

  3. sal پاسخ دادن

    سلام ترو خدا میتونید بگید چجوری ذخیره یمشه؟؟؟

    • جواد عوض زاده

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

  4. این نوشته در مطلبی با عنوان دومین سالگرد با تاخیر | جواد عوض زاده منتشر شده است

  5. سینا پاسخ دادن

    خواهشا بگید چجوری ذخیره میشه یعنی وقتی صفحه رو refresh کردیم اون تغییرات اعمال شده باشند

    • جواد عوض زاده

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

  6. سینا پاسخ دادن

    من خودم یک طراح وبسایت هستم و به تمام این ها آشنایی دارم لطفا اگر پیچیده بود باز هم بگید

  7. سیامک پاسخ دادن

    عزیزم ذخیره یعنی چی؟!!!! این کد را کلاینتی عوض میکنی یه رفرش کنی میره سمت سرور پاک میشه..این قسمت فقط واسه تست و آنالیزه و هر کد کلاینتی( html , jquery) تغییر دادی باید عینا تو کدتم تغییر بدی..اگر میشد ذخیره کنی و اعمال بشه که هر کسی میتونست توی سایت بقیه دست ببره

  8. مرتضا پاسخ دادن

    سلام. متاسفانه من نمی تونم فیلم های یوتیوب یا فیلم هایی که با جاوا پشتیبانی می شن رو روی اپرا ببینم. شاید خنده ات بگیره، اما چون تازه با این مرورگر آشنا شدم و از فضاش خوشم اومده، دوست دارم این مشکل برطرف بشه. آیا می تونی کمکم کنی؟ در ضمن من نمی تونم menu bar رو ببینم. چطور می شه منو بار رو از فرم مخفی شده برگردوند و آشکار کرد؟
    ممنون از شما

    • جواد عوض زاده

      سلام
      شما باید فلش پلیر رو روی سیستمتون نصب کنید.
      برای دیدن منو هم کافیه دکمه Alt کیبورد خودتون رو فشار بدید یا روی منوی اپرا (بالا سمت چپ)‌ کلیک کنید.

  9. مرتضا پاسخ دادن

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

  10. مرتضا پاسخ دادن

    سلام دوباره. متاسفانه با نصب دوباره فلش پلیر هم (همان که شما معرفی کرده اید از سایت 98) مشکل حل نشد.

  11. oo پاسخ دادن

    از کجا باید فایلشو دان کنم

    • جواد عوض زاده

      سلام
      میتونید رو آپارات آنلاین ببینید یا از آپارات دانلود کنید
      در حال حاضر نسخه لینک مستقیم سایت غیرفعاله