آموزش استفاده از کنسول مرورگر در گوشی و تبلت

آموزش استفاده از کنسول مرورگر در گوشی و تبلت

دی ۱۴, ۱۳۹۹

 

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

این روشی که قرار است داخل این مقاله با آن آشنا شویم خیلی راحت ، کاربردی و بدون نیاز به ابزار دیگر می باشد. با این روش خیلی ساده می توانید از امکاناتی که مرورگر دسکتاپ در اختیارتان می گذارد، داخل گوشی یا تبلت استفاده نمایید. از این امکانات می توان به اجرای کد جاوا اسکریپت در صفحات وب، اینسپکت(inspect)، مشاهده سورس صفحه و… اشاره کرد.

نکات مهم استفاده از کنسول مرورگر در گوشی و تبلت :

  1. نوع مرورگر دستگاه اهمیتی ندارد ولی بهتر است مرورگر که بازده خوبی داشته باشد، به صورت عمومی می توانید از کروم موبایل استفاده کنید که برای سیستم عامل های مختلف قابل دانلود و نصب است.
  2. سیستم عامل دستگاه شما نیز اهمیتی ندارد (اندروید یا ios).
  3. این روش را می توانید حتی برای دسکتاپ هم انجام دهید.

آموزش استفاده از کنسول مرورگر در گوشی و تبلت :

این ابزار توسط پروژه ای به نام Eruda داخل گیت هاب توسعه داده شده است و به صورت خلاصه یک فایل js می باشد که به صفحه مورد نظر شما ( مثلا sample.com ) اضافه می شود و یک دکمه شناور را به صفحه اضافه می کند و با زدن روی دکمه، کنسول شبیه سازی شده برای شما اجرا می شود بنابراین چون شبیه سازی شده است قطعا تمام قابلیت های کنسول دسکتاپ رو ندارد ولی به اندازه کافی جهت رفع نیاز شما ابزار در اختیار خواهد گذاشت.

شروع آموزش:

برای استفاده از این ابزار و نگاهی به گیت هاب متوجه خواهیم شد که باید کد زیر را داخل آدرس بار ( جایی که آدرس سایت را مینویسیم داخل مرورگر ) وارد نمایید.

javascript:(function () { var script = document.createElement('script'); script.src="//cdn.jsdelivr.net/npm/eruda"; document.body.appendChild(script); script.onload = function () { eruda.init() } })();

برای مشاهده بهتر کد اینجا کلیک کنید.

برای نمونه همین کد بالا رو کپی کنید و در آدرس بار خودتان جایگذاری (paste) و اینتر رو بزنید.

حالا اگر به درستی این کار را انجام داده باشید یک دکمه به صفحتان اضافه شده که قابلیت جا به جایی داره و با زدن بر روی آن کنسول باز می شود. کل مراحل همین بود. به مقالات دیگر ما داخل صفحه مقالات رایمون سر بزنید.

نکته مهم و کاربردی در استفاده از کنسول مرورگر در گوشی و تبلت :

  • توجه داشته باشید که در ابتدای کد حتما javascript: نوشته شده باشد.
  • می توانید کد بالا را به صورت بوکمارک داشته باشید. برای اینکار لینک زیر را باز کنید و کد بالا را داخل سایت باز شده قرار دهید و لینکی که پایین صفحه میسازد را (My Bookmarklet) بوکمارک کنید.

سایت ساخت بوکمارک

 

کار با محیط کنسول در یک مرورگر (دسکتاپ)

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

مرورگر Firefox

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

اما به جای همه این کارها می توانید با استفاده از میانبر صفحه کلید CTRL + SHIFT + در لینوکس و ویندوز وارد محیط کنسول مرورگر شوید. اکنون که وارد این محیط شدیم میتوانیم در مورد جاوا اسکریپت و نحوه کار با آن در این محیط صحبت کنیم.

مرورگر Chrome

برای باز کردن محیط کنسول جاوا اسکریپت در مرورگر کروم می توانید از بالا منوی سمت راست را کلیک کنید، این دکمه به شکل سه نقطه عمودی در بالای مرورگر کروم وجود دارد. سپس از زیر منوی More Tools گزینه Developer Tools را انتخاب کنید. این کار برای شما محیط کنسول جاوا اسکریپت را در مرورگر کروم باز خواهد کرد.

برای سادگی کار می توانید با استفاده از کلید های میانبر صفحه کلید CTRL + SHIFT + J در ویندوز و لینوکس به این محیط دسترسی داشته باشید. اکنون که به این محیط دسترسی پیدا کردید به راحتی می توانید کدهای جاوا اسکریپت خود را در این محیط تایپ کنید.

منبع بخش کار با محیط کنسول در یک مرورگر