مرورگر ها معمولاً دارای ابزارهای توسعه هستند که از آنها برای کار با جاوا اسکریپت و سایر فناوری‌های وب استفاده می شود، این ابزارها شامل صفحه کنسولی میشود که بسیار شبیه یک رابط shell است، همچنین شما می توانید از ابزارهای مرورگر برای بررسی DOM، خطایابی و تحلیل فعالیت های شبکه استفاده کنید.

console

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

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

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

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

مرورگر Firefox

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

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

مرورگر Chrome

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

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

کار با محیط کنسول

در داخل محیط کنسول می توانید کدهای جاوا اسکریپت تایپ کنید. اجازه دهید کار خود را با یک پنجره هشدار شروع کنیم. کد زیر را در محیط کنسول وارد کنید :

alert("Hello, World!");

سپس کلید Enter را بفشارید، در این صورت کد شما اجرا خواهد شد و چیزی که در مرورگر خواهید دید به شکل زیر است :
javascript-alert
دقت داشته باشید که محیط کنسول نتیجه ارزیابی یک عبارت را برای شما چاپ می کند حتی اگر چیزی برای نمایش وجود نداشته باشد، عبارت undefined نشان داده خواهد شد. اما به جای اینکه از هشدارهای پاپ آپ استفاده کنیم، می توانیم از console.log برای گزارش گیری کارهای خود استفاده کنیم.

برای چاپ رشته Hello, World! کافیست کد زیر را در محیط کنسول وارد کنیم :

console.log("Hello, World!");

در این صورت خروجی زیر را مشاهده خواهید کرد :

Hello, World!

علاوه بر این می توانید از جاوا اسکریپت برای انجام عملیات ریاضی به شکل زیر استفاده کنید :

console.log(2 + 6);

خروجی در این صورت به شکل زیر است :

8

میتوانیم عملیات ریاضی خود را کمی پیچیده تر کنیم :

console.log(34348.2342343403285953845 * 4310.23409128534);

خروجی در این صورت به شکل زیر است :

148048930.17230788

علاوه بر این‌ها می‌توانیم روی چندین خط از متغیر ها کار کنیم :

let d = new Date();
console.log("Today's date is " + d);

خروجی به شکل زیر است :

Today's date is Wed Jun 21 2017 15:49:47 GMT-0400 (EDT)

اگر نیاز دارید دستوری که از طریق محیط کنسول وارد کرده اید را ویرایش کنید با فشردن کلید فلش به سمت بالا بر روی کیبورد می توانید به دستور قبلی دسترسی داشته باشید، در این صورت می‌توانید دستور ذکر شده را ویرایش کرده و دوباره بر روی کلید Enter کلیک کنید.

پنجره کنسول جاوا اسکریپت در مرورگرها با استفاده از محیطی شبیه shell فضایی را برای امتحان کردن کدهای جاوا اسکریپت در زمانی که اپلیکیشن شما در حال اجرا است، فراهم می آورد.

کار با یک فایل html 

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

بیاید یک سند html خالی همچون index.html را در نظر بگیریم، می خواهیم ببینیم چطور می توان با استفاده از محیط کنسول آن را ویرایش کرد :

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today's Date</title>
</head>

<body>

</body>

</html>

 اگر فایل html بالا را ذخیره کرده و آن را در مرورگر خود بارگذاری کنید، باید با یک صفحه خالی که دارای عنوان Today's Date است، روبه‌رو شوید. سپس می توانید محیط کنسول را باز کرده و کار خود را با جاوا اسکریپت برای تغییر صفحه شروع کنیم. ما کار خود را با وارد کردن عنوانی در html آغاز می کنیم :

let d = new Date();
document.body.innerHTML = "<h1>Today's date is " + d + "</h1>"

در این صورت خروجی زیر را در در محیط کنسول مشاهده می کنید :

"<h1>Today's date is Sat Jun 24 2017 12:16:14 GMT-0400 (EDT)</h1>"

و در این نقطه صفحه شما چیزی به شکل زیر خواهد بود :

outhtml

همچنین می‌توانیم به سمت تغییر استایل های صفحه مانند رنگ پس زمینه برویم :

document.body.style.backgroundColor = "lightblue";

خروجی :

"lightblue"

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

document.body.style.color = "white";

خروجی :

"white"

 در حال حاضر صفحه شما باید چیزی شبیه شکل زیر باشد :

javascript-console-style

 از اینجا به بعد می توانید یک عنصر پاراگراف را ایجاد کنید :

let p = document.createElement("P");

 در نمونه کد بالا یک عنصر پاراگراف ایجاد شده است، اکنون می‌توان متن آن را نیز به شکل زیر مشخص کرد :

let t = document.createTextNode("Paragraph text.");

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

p.appendChild(t);

و سپس پاراگراف آماده را با استفاده از کد زیر به صفحه خود اضافه می کنیم :

document.body.appendChild(p);

 پس از اتمام این مراحل صفحه مورد نظر باید شبیه شکل زیر باشد :

javascript-console-with-paragraph

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

آشنایی با دیگر ابزارهای توسعه در مرورگرها

بسته به نوع مرورگری که برای کار خود استفاده می کنید، می توانید از ابزارهای آن برای پیشبرد اهداف خود بهره ببرید در اینجا به چند مورد از آنها اشاره میکنیم :

DOM — Document Object Model

زمانی که یک صفحه وب بارگذاری می شود مرورگر وب یک DOM را ایجاد می کند، DOM درختی از اشیا بوده و عناصر html را در نمایی درختی به شما نشان می دهد. DOM از طریق پنل Inspector در فایرفاکس یا  Elements در کروم قابل مشاهده است. این ابزارها به شما اجازه می دهند عناصر DOM را بازرسی و ویرایش کنیذ، همچنین با استفاده از آنها می توانید به عناصر مختلف صفحه از جمله تصاویر، متون و غیره دسترسی داشته باشید.

صفحه ای که در این مقاله به آن اشاره کردیم دارای نمای DOM زیر است :

javascript-dom-example

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

ابزار Network

پنل Network از ابزارهای توسعه توکار مرورگرها محسوب می شود که از آن می توان برای نظارت و ضبط درخواست های رد و بدل شده استفاده کرد. در این پنل درخواست هایی که در مرورگر رخ می‌دهد نشان داده می شوند. برای مثال زمانی که در حال بارگذاری یک وب سایت هستید تمام این درخواست ها با جزئیات داخل این پنل قابل مشاهده است. از این پنل می توان برای بهینه سازی صفحات وب و مشکلاتی که در درخواستها وجود دارد استفاده کرد.