امروز: مارس 19, 2024 7:00 ق.ظ

ابزارهای توسعه برنامه نویسی در جاوا اسکریپت

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

بیشتر توسعه دهندگان برای توسعه تمایل به Chrome یا Firefox دارند، زیرا این مرورگرها بهترین ابزارهای توسعه دهنده را دارند. مرورگرهای دیگر نیز ابزارهای توسعه دهنده را ارائه می دهند، که گاهی اوقات ویژگی های خاصی نیز دارند، اما معمولاً مرورگر Chrome یا Firefox نسبت به سایرین سازگارتر عمل می کنند. بنابراین اکثر توسعه دهندگان یک مرورگر “مورد علاقه” دارند.

ابزارهای توسعه دهنده قوی هستند. همچنین ویژگی های بسیاری نیز دارند. در این آموزش، برای شروع، یاد میگیریم که چگونه آنها را باز کنیم، خطاها را بررسی کنیم و دستورات JavaScript را اجرا کنیم.

گوگل کروم (Google Chrome)

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

  • به طور مثال صفحه bug.html را باز کنید.
  • کد JavaScript این صفحه خطایی شامل خطا می باشد. ولی در ظاهر صفحه چیزی مشخص نیست. برای مشاهده این خطا، ابزارهای توسعه دهنده را به صورت زیر باز میکنیم.
  • F12 را فشار دهید یا اگر در Mac هستید ، سپس Cmd + Opt + J را فشار دهید.
  • برای مشاهده ابزارهای توسعه دهنده، تب Console باز را باز کنید.
  • خطایی که میبینید به این شکل است:
ابزار توسعه دهنده

دقت داشته باشید، که شکل دقیق ابزارهای توسعه دهنده به نسخه Chrome شما بستگی دارد. چون هر از گاهی تغییر می کند اما معمولا مشابه هم هستند.

در این بخش میتوانیم پیام خطای قرمز رنگ را مشاهده کنیم. همانطور که ملاحظه میکنید، اسکریپت شامل یک دستور ناشناخته “lalala” است.
در سمت راست، یک آدرس قابل کلیک به منبع bug.html: 12 با ذکر شماره خطی که خطا در آن رخ داده، وجود دارد.
در زیر پیام خطا ، یک آیکن آبی رنگ > وجود دارد. این آیکن یک “خط فرمان” است که در آن می توانیم دستورات JavaScript را تایپ کنیم. برای اجرای آنها Enter را فشار دهید.

وارد کردن کدهای چند خطی

معمولاً وقتی یک خط کد در کنسول مینویسیم و سپس Enter را فشار می دهیم، اجرا می شود.

برای درج چندین خط ، Shift + Enter را فشار دهید. به این ترتیب می توان تکه کدهای طولانی تری از JavaScript را وارد کرد.

Firefox ، Edge و دیگران

بیشتر مرورگرهای دیگر از F12 برای باز کردن ابزارهای توسعه دهنده استفاده میکنند.

ظاهر و نحوه عملکرد در تمام مرورگرها کاملاً مشابه است. هنگامی که با یکی از این ابزارها کار میکنید، (میتوانید با Chrome شروع کنید)، میتوانید به راحتی به از مرورگر دیگری استفاده کنید.

سافاری (Safari)

Safari (مرورگر Mac ، که توسط Windows / Linux پشتیبانی نمیشود) کمی با بقیه مرورگرها تفاوت دارد. ابتدا باید “منو توسعه(Developer menu)” را فعال کنیم.

برای انجام این عمل، Preferences را باز کنید و به صفحه “Advanced” بروید. در پایین یک کادر تأیید وجود دارد:

ابزار توسعه در سافاری

حالا با دکمه های ترکیبی Cmd + Opt + C میتوانید کنسول را تغییر دهید. همچنین، توجه داشته باشید که تب جدیدی به فهرست بالا به نام “Develop” پدیدار میشود. این تب شامل دستورات و گزینه های بسیاری میباشد.

خلاصه

ابزارهای توسعه دهنده به ما امکان دیدن خطاها، اجرای دستورات، بررسی متغیرها و موارد دیگر را می دهند.
برای اکثر مرورگرهای ویندوز با F12 باز می شوند. Chrome برای Mac به Cmd + Opt + J و همچنین Safari: Cmd + Opt + C نیاز دارد (ابتدا باید فعال شود).

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

, , , , ,
0.00 avg. rating (0% score) - 0 votes
0 نظرات

بدون نظر

fa_IRPersian