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

Blisk تنها مرورگر وب متمرکز بر طراحان سایت است که به شما این امکان را می دهد تا به تمام قابلیت های مورد نیاز برای ایجاد تجربیات آنلاین باورنکردنی دست پیدا کنید. تقریباً در هر طراحی از Google Pixel گرفته تا iPhone می توانید شکل ظاهری وب سایت یا اپلیکیشن خود را مشاهده کنید. در واقع از Blisk می‌توانید هم به عنوان یک مرورگر معمولی برای جستجو در سراسر وب و هم اینکه از یک فضای کاری برای توسعه وب (حالت توسعه دهنده) استفاده نمایید. در این مقاله از سری مطالب آموزشی آی وحید قصد داریم به معرفی و شرح کامل کاربرد این مرورگر بپردازیم. با ما همراه باشید.

Blisk چیست؟

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

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

موارد استفاده مرورگر Blisk

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

مرورگر وب

مانند سایر مرورگرها، Blisk از نوار آدرس ( Omnibox ) برای پیمایش در وب استفاده می کند. برای مشاهده محتوای وب، URL یا درخواست جستجو آدرس مورد نظر را در نوار آدرس تایپ کنید.

حالت توسعه دهنده

حالت Developer یک حالت توسعه یافته است و شامل ویژگی هایی است که شما برای طراحی، توسعه و آزمایش وب نیاز دارید. با فعال کردن حالت توسعه دهنده، Blisk عناصر و کنترل های رابط اضافی را نمایش می دهد: منوها، اعلان ها، صفحه دستگاه ها و غیره.

حالت توسعه دهنده شامل موارد زیر می‌شود :

  • می‌توانید بیش از 50 مدل مختلف دستگاه را مدیریت کنید : تلفن همراه، تبلت، لپ تاپ و رایانه رومیزی. می توانید به طور همزمان از یک دستگاه یا چند دستگاه استفاده کنید.
  • مرورگر Blisk به طور مداوم خطاهای صفحه در JavaScript و منابعی را که بارگیری نمی شوند کنترل می کند. وقتی مشکلی در هر دستگاه رخ میدهد، به کاربر اطلاع داده می شود.
  • میتوانید از انواع مختلف ضبط استفاده کنید : اسکرین شات یا اسکرین ویدیو. از یک دستگاه یا از کل مجموعه عکس بگیرید و اسکرین شات ها را با Image Editor حاشیه نویسی کنید.
  • مرورگر بلیسک کدها را با آخرین نسخه در دستگاه ها به روز می کند. هنگام تغییر کد منبع و ذخیره تغییرات، محتوای وب به طور خودکار تازه سازی می شود.

ویژگی های مرورگر Blisk

  • همه دستگاه های مورد نیاز از قبل در مرورگر شما نصب شده اند. Blisk مجموعه ای از موبایل ، تبلت و لپ تاپ است.
  • Blisk دستگاه های مختلفی را با تمام رزولوشن های مورد نیاز ارائه می دهد : از iPhone SE کوچک تا صفحه دسکتاپ بزرگ.
  • هماهنگ سازی موقعیت اسکرول و URL در صفحه نمایش های دسکتاپ و موبایل
  • Blisk موبایل و دسکتاپ را در کنار هم نشان می دهد. بنابراین ، می توانید همزمان آنها را توسعه داده یا آزمایش کنید.
  • سازگار با انواع IDE، زبان برنامه نویسی، و فریمورک
  • موبایل و تبلت در این مرورگر قابل لمس هستند یعنی تمامی عملیاتی که با لمس روی صفحه نمایش این دستگاه ها قابل اجراست روی بلیسک دارید از جمله : ضربه ، دو ضربه سریع ، کشیدن و غیره
  • از موبایل و لپ تاپ در حالت افقی و عمودی پشتیبانی می کنند.
  • قابلیت مدیریت و مقایسه ارائه در نمایشگر استاندارد در مقابل نمایشگر HiDPI یا Retina
  • Blisk انواع سیستم عامل های مختلف را ارائه می دهد: از iOS تلفن همراه و اندروید گرفته تا ویندوز و macOS روی دسک تاپ.
  • Blisk ، از اپل، گوگل، مایکروسافت، سامسونگ، ال جی و غیره به دستگاه های برتر دسترسی پیدا می کنید.
  • مرورگر Blisk امکان استفاده همزمان DevTools کروم را در موبایل و دسکتاپ فراهم می کند.
  • Blisk دارای یک URL واحد برای پیمایش هم در تلفن همراه و هم در دسکتاپ است بنابراین نیازی به کپی و پیست کردن URL ندارید.
  • شما همیشه محتوای یکسانی را در دسکتاپ و موبایل پیش نمایش می کنید. Blisk آن ها را با موقعیت پیمایش config می کند.
  • این امکان را فراهم می‌کند که در هنگام اصلاح کد منبع با تازه سازی یا رفرش خودکار صفحات، طراحی لذت بخشی را تجربه کنید.
  • Blisk درمورد مشکلات JavaScript یا منابعی که بارگیری نمی‌شوند، به شما اطلاع می دهد.
  • این امکان را برای شما فراهم کرده است که با یک کلیک از دسکتاپ یا موبایل عکس بگیرید و آن را با تیم خود به اشتراک بگذارید.
  • با یک کلیک از کل صفحه فیلم بگیرید و آن را با تیم خود به اشتراک بگذارید.
  • Blisk می تواند به شکل خودکار عکس صفحه نمایش چندین دستگاه را به صورت همزمان نمایش دهد.
  • می‌توانید برای عکس های صفحه خود از ذخیره سازی ابر Blisk استفاده کنید.
  • می‌توانید برای حاشیه نویسی در تصاویر صفحات سایت خود از ویرایشگر موجود در این مرورگر استفاده کنید.
  • می‌توانید بدون راه اندازی DevTools از مرورگر بلیسک برای بازرسی سریع عناصر استفاده کنید.

حالت توسعه دهنده یا Developer را فعال کنید

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

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

Menu ➜ Settings ➜ Developer Mode

و رویApply Developer Mode to All Domains کلیک کنید

برای غیرفعال کردن حالت برنامه نویس ، روی دکمه Developer Mode در سمت چپ Omnibox کلیک کنیدو مسیر زیر را بروید :

Menu ➜ Device Set ➜ Exit Developer Mode

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

رابط کاربری مرورگر Blisk

Bliskدر بالای Chromium ساخته شده است همچنین توسط مرورگر Chrome نیز استفاده می شود و از یک رابط کاربری با حداقل مواد برخوردار است. مانند بسیاری دیگر از مرورگرها، Blisk از یک رابط کاربری مشترک ( برگه ها ، نوار آدرس ، نوار ابزار ، اعلان ها ) در بالا برای پیمایش و دستکاری برگه ها و Webview در پایین استفاده می کند که محتوای وب URL های باز شده را نشان می دهد. با فعال کردن حالت توسعه دهنده ، Blisk عناصر و کنترل های رابط اضافی را نمایش می دهد: منوها ، اعلان ها ، صفحه دستگاه ها ، دستگاه ها و غیره.

بررسی منو مرورگر Blisk

از منو می‌توانید برای دستکاری مجموعه دستگاه های خود، کنترل طرح و اندازه دستگاه ها، فعال و غیرفعال کردن ویژگی ها ( به عنوان مثال تازه سازی خودکار، همگام سازی URL، همگام سازی پیمایش، حافظه پنهان دستگاه و غیره ) استفاده کنید.

این منو شامل موارد زیر است:

  • Device Set : برای کنترل مجموعه دستگاه فعلی ، از مورد منو استفاده کنید.
  • View : برای کنترل ظاهر و رابط کاربری در حالت توسعه دهنده استفاده کنید.
  • Capture : برای اسکرین شات گرفتن استفاده کنید ( از صفحه عکس بگیرید یا فیلم ضبط کنید ) و اطلاعات ذخیره شده خود را در فضای ذخیره سازی ابری مشاهده کنید.
  • Auto-refresh : فعال یا غیرفعال کردن تازه سازی خودکار ( Refresh ) استفاده کنید.
  • Tools : برای استفاده از ابزارهای داخلی ( ویرایشگر تصویر، Scroll sync, URL Sync، کنترل حافظه پنهان و…
  • Account : برای دسترسی به حساب Blisk خود، تغییر رمز عبور، استفاده از مجوز Premium و غیره…

مدیریت دستگاه ها در مرورگر Blisk

Device Manager کنترل لیست دستگاه های موجود در مجموعه و اندازه آن ها را برای شما امکان پذیر می‌کند. مدیر دستگاه یک رابط کاربری ساده دارد: برگه هایی با دسته ها و گروه های دستگاه در قسمت بالایی، لیست سمت چپی برای انتخاب دستگاه و لیست انتخاب شده ها در سمت راست.

برای راه اندازی Device Manager :

از صفحه اصلی : از بخش Start ، روی New device set کلیک کنید.
از حالت توسعه دهنده :
مسیر 1 : Menu ➜ Device Set ➜ New Set.
مسیر 2 : روی دکمه Device Manager در بالا سمت راست کلیک کنید.

با استفاده از Device Manager می توانید :

  • با انتخاب دستگاه ها، مجموعه دستگاه خود را ایجاد یا ویرایش کنید.
  • با کشیدن و رها کردن ، دستگاه ها را در Device Manager مرتب کنید.
  • دستگاه ها را در اندازه واقعی راه اندازی کنید.
  • از تمپلت های مختلف استفاده کنید ( لیست های از پیش تعریف شده دستگاه ها ( به عنوان مثال iOS Mobile ).
  • مجموعه دستگاه های اخیراً استفاده شده را مشاهده و راه اندازی کنید.

Device Set & Device Pane

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

1- اطلاعات دستگاه : شامل نام و ویژگی های دستگاه (به عنوان مثال سیستم عامل ، اندازه نما، PPI)
2- اقدامات دستگاه : شامل دکمه هایی برای گرفتن اسکرین شات، راه اندازی ابزارهای برنامه نویسی، چرخاندن و حذف دستگاه از Device Manager.
3- خطاها و هشدارها : خطاها و هشدارهای ظاهر شده در صفحه وب داخل دستگاه را نشان می دهد.
4- حالت دستگاه : منطقه ای که اندازه دستگاه و سرعت شبکه را کنترل می کند :

  • اندازه دستگاه: می توانید بین اندازه مقیاس و اندازه واقعی جابجا شوید.
  • سرعت شبکه: می توانید شبکه های مختلف (آنلاین ، سریع 3G ، آهسته 3G ، بسیار کند) را شبیه سازی کنید.

ایجاد Device Set :

برای ایجاد Device Set از Device Manager استفاده کنید :
1- در صفحه اصلی روی New device set از قسمت Start کلیک کنید.
2- Blisk مدیریت دستگاه را شروع می کند.
3- دستگاه ها را از لیست انتخاب کرده و روی Launch devices کلیک کنید.
4- Blisk با دستگاه هایی که قبلاً انتخاب شده اند ، Device Set را ایجاد می کند.

ویرایش Device Set :

برای ویرایش Device Set با حالت توسعه دهنده فعال ، روی دکمه مدیریت دستگاه در بالا سمت راست کلیک کنید. لیست دستگاه ها را در Device Manager به روز کنید و روی راه اندازی دستگاه ها کلیک کنید. بلیسک Device Set جدید را شروع می کند.

Splitter در مرورگر بلیسک

Splitter در Multi-device Set ظاهر می شود ( مجموعه ای با دو دستگاه و بیشتر ) و به شما امکان می دهد ترتیب Device Set را کنترل کنید. از Splitter برای تغییر اندازه دستگاه ها استفاده کنید.

Themes در مرورگر بلیسک

تم های رنگی به شما امکان می دهد رنگ ها را در رابط کاربری Blisk متناسب با تنظیمات و محیط کار خود تغییر دهید. به طور پیش فرض ، Blisk تم سیستم شما را به خود می‌گیرد ( روشن یا تاریک ).
برای تغییر رنگ تم :
1- صفحه اصلی را باز کنید.
2- از بخش Customize ، روی Theme کلیک کنید .
3- در پنجره تنظیمات ، از قسمت Theme گزینه ای را انتخاب کنید.

دیوایس ها در مرورگر Blisk

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

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

  • Screen resolution یا وضوح صفحه تعداد پیکسل هایی است که صفحه می تواند به صورت افقی و عمودی نشان دهد. بنابراین ، صفحه ای که دارای رزولوشن 1920 در 1080 است ( رزولوشن محبوب که با نام 1080p یا Full HD نیز شناخته می شود ) می تواند 1080 پیکسل را به صورت عمودی و 1920 پیکسل را به صورت افقی نمایش دهد. Blisk از دستگاه هایی با وضوح صفحه نمایش متفاوت پشتیبانی می کند ، از صفحه نمایش های کوچک 320 پیکسل تا صفحه نمایش های بزرگ 2560 پیکسل.
  • Device pixel ratio یا نسبت پیکسل دستگاه نسبت وضوح در پیکسل های فیزیکی به رزولوشن در پیکسل های CSS برای دستگاه نمایش فعلی است. Blisk از دستگاه هایی با نمایشگر با وضوح بالا پشتیبانی می کند.
  • User-Agent مدیریت کاربر رشته ای است که به سرورها و شبکه های مشابه اجازه می دهد تا برنامه، سیستم عامل، فروشنده و یا نسخه نماینده کاربری درخواست کننده را شناسایی کنند.
  • supportیا پشتیبانی را لمس کنید. دستگاه های تلفن همراه ( تلفن ها و تبلت ها ) از قابلیت لمسی پشتیبانی می کنند : ضربه ، دو ضربه سریع ، کش رفتن و غیره

دستگاه های پشتیبانی شده در مرورگر Blisk :

Multi Device Set

در Blisk ، می توانید یک Device Set با چندین دستگاه ایجاد کرده و به طور همزمان از آنها استفاده کنید. برای توسعه و آزمایش همزمان موبایل، تبلت و دسکتاپ ، می توانید دستگاه هایی از انواع مختلف و سیستم عامل را مخلوط کنید. با این روش می توان کارهای توسعه را دو برابر سریعتر از قبل انجام داد.

وقتی از چندین دستگاه به طور همزمان استفاده می کنید، آنها از یک حافظه پنهان مشترک، کوکی ها، بانک اطلاعاتی و غیره استفاده می کنند. بنابراین، هنگام مرور هر وب سایتی ( اینترنت یا سرور محلی ) ، دستگاه ها به طور خودکار وارد وب سایت ها می شوند و از تنظیمات سایت های مشابه استفاده می کنند. از مسیر Menu ➜ Tools ➜ Enable Device Cache برای کنترل حافظه پنهان استفاده کنید.

قابلیت رفرش اتوماتیک

رفرش اتوماتیک کد را به آخرین نسخه در دستگاه ها به روز می کند. هنگام تغییر کد منبع و ذخیره تغییرات ، محتوای وب به طور خودکار تازه می شود. CSS حتی بدون رفرش صفحه به روز می شود. رفرش خودکار صفحه با دامنه ها و نه با URL های خاص کار می کند. اگر این عملیات را برای http: // localhost تنظیم کنید ، مرورگر Blisk تمام URL ها را از این دامنه به طور خودکار رفرش می کند. مراحل تنظیم حالت رفرش خودکار صفحه را در ادامه آورده ایم:

1- به دامنه ای که می خواهید به طور خودکار رفرش شود بروید و حالت توسعه دهنده را فعال کنید.
2- روی منو رفرش خودکار کلیک کنید. مرورگر Blisk پنجره را با تنظیمات refresh خودکار نشان می دهد.
3- تنظیمات رفرش خودکار را مشخص کنید:
1- Textbox با نام دامنه که به طور خودکار تازه می شود. دامنه فعلی آدرس نوار ( Omnibox ) از پیش انتخاب می شود. می توانید نام دامنه دیگری را تعیین کنید. توجه: بهترین روش کپی کردن URL از نوار آدرس است.
2- Textbox با فرمت های فایل. قالب های فایل مشخص شده باعث می شود صفحه وب به طور خودکار رفرش شود. قالب های فایل باید با کاما تقسیم شوند.
3- دکمه Select Folder را انتخاب کنید. روی این دکمه کلیک کنید و پوشه مورد نیاز را انتخاب کنید. Blisk مراقب تغییرات فایل های موجود در این پوشه خواهد بود.

4- روی OK کلیک کنید. Blisk تنظیمات رفرش خودکار صفحه را ذخیره کرده و بازخوانی خودکار ایجاد شده را فعال می کند.
5- در نتیجه ,Blisk checkbox را در فهرست رفرش خودکار نشان می دهد، به این معنی که صفحه رفرش خودکار صفحه برای دامنه فعلی فعال است.

ابزارهای مرورگر Blisk

برای استفاده از ویژگی های اضافی مانند ویرایشگر تصویر ، برای مدیریت Sync URL ، Sync اسکرول و حافظه پنهان دستگاه، از مسیر Menu ➜ Tools استفاده کنید. این بخش شامل گزینه های زیر می‌شود:

  • ویرایشگر تصویر( Image Editor ) : از این ویژگی برای حاشیه نویسی اسکرین شات ها و تصاویر استفاده کنید. به طور پیش فرض ، مرورگر Blisk پس از گرفتن اسکرین شات، ویرایش تصویر را شروع می کند. اگر می خواهید از ویرایش تصویر صرف نظر کنید روی Menu ➜ Capture ➜ Capture Settings کلیک و تنظیمات را تغییر دهید.
  • می توانید ویرایشگر تصویر را از منو ➜ ابزار ➜ ویرایشگر تصویر به طور مستقل شروع کنید ، یک تصویر را از پوشه لوکال خود انتخاب کنید و از این ابزار برای حاشیه نویسی یک تصویر استفاده کنید.
  • فعال کردن URL Sync : از این ویژگی برای فعال و غیرفعال کردن اتصال URL استفاده کنید.
  • فعال کردن Scroll Sync : برای فعال کردن و غیرفعال کردن Scroll Sync از این ویژگی استفاده کنید.
  • فعال کردن حافظه پنهان دستگاه: برای فعال یا غیرفعال کردن ذخیره منابع ( به عنوان مثال CSS ، JavaScript ، تصاویر و غیره ) در دستگاه ها، روی این مورد منو کلیک کنید.