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

3591 روز پیش

با توجه به درخواست تعداد زیادی از دوستان و همینطور باجناقم(!)، مبنی بر آموزش تجزیه و تحلیل یک صفحه وب و ساختار اون، این آموزش رو که توی اون با استفاده از ابزار 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 هم که کارش پر کردن فرم های ذخیره شدس که اونم عالیه
  • و …

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