illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

ترفندهای پیشرفته برای Inspector مرورگر Chrome (قسمت 3) : کپی کردن تصاویر و کار کردن با HAR

0 328 ۲۸ مرداد ۹۵

inspector

ترفند 4 : کپی کردن تصاویر بصورت data URI

همونطور که میدونید شما میتونید تصاویر رو بصورت data-URI در بیارید و از اونا استفاده کنید. مزیتی که این حالت داره اینه که درخواستی برای اون حساب نمیشه و سایتتون سریعتر خواهد شد. برای اینکه ببینید این مورد در چه مرورگرهایی پشتیبانی میشه به سایت caniuse سر بزنید. شما میتونین تصاویری که درون Inspector هستن رو بصورت data-URI کپی کرده و از اونا استفاده کنید. برای مثال ما وارد w3schools میشیم و Inspector رو باز میکنیم و به تب Sources میریم:data uri

روی عکس مشخص شده کلیک میکنیم تا در سمت راست باز بشه:data uri 2

حالا برای اینکه این عکس رو بصورت data-URI ذخیره کنیم، بر روی عکس کلیک راست کرده و بر روی گزینه copy image as data URI کلیک میکنیم:data uri 3

حالا این مورد در Clipboard یا حافظه موقت دستگاه ما ذخیره شده. اگه من کد مورد نظر رو اینجا paste کنم، بصورت زیر هست:

ترفند 5 : کار کردن با HAR

همونطور که میدونید زمانی که سایتی رو باز میکنید، تب Network موجود در Inspector درخواست ها و request هایی که بین مرورگر و سرور ردوبدل شده رو نمایش میده و شما میتونین همه اونا رو ببینید و هدرهای اونا رو مشاهده کنید. برای مثال ما همون سایت بالایی رو باز کرده و تب Network رو باز میکنیم:har

همونطور که میبینید هنوز چیزی وجود نداره و ازمون میخاد که مرورگر رو refresh کنیم. بعد از اینکه رفرش کردیم تمام درخواستها نمایش داده میشه:har 2چیزی که ما در اینجا با اون کار داریم، سمت راست این تب هست که بهش HAR یا HTTP Archive میگن.har 3

همونطور که در تصویر بالا هم مشاهده کردید با استفاده از HAR میشه سایت رو آنالیز و تجزیه تحلیل کرد و با استفاده از خط زمانی که در اختیارمون میزاره، مشخص میکنه که لود صفحه چقد طول کشیده و چه فایلی چقد برای لود شدن زمان برده. شما میتونین این اطلاعات رو بصورت یک فایل HAR دریافت کنید و اون رو به هر کسی ک میخاد سایتتون رو آنالیز کنه بدید تا اونو بررسی کنه. برای اینکار ما یجای این تب کلیک راست میکنیم و گزینه save as HAR with content رو میزنیم:har 4

با اینکار یک پنجره باز میشه:har 5

اون رو در Desktop ذخیره میکنم. بعد از اینکار اگه Desktop رو ببینید بصورت زیر هست:har 6

حالا میتونیم این فایلو به نفر مقابل بدیم. سایتای زیادی هستن که فایلهای HAR رو نمایش میدن. شما میتونین از این سایت استفاده کنید.har 7

حالا شما میتونین فایل HAR رو درگ کرده و درون این صفحه رها کنید. با اینکار اطلاعات به شما نمایش داده میشه:har 8

بهمین راحتی.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

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

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram