نمای کلی کنسول

کیسی باسکی
Kayce Basques

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

نمای کلی

این صفحه توضیح می‌دهد که چگونه Chrome DevTools Console توسعه صفحات وب را آسان‌تر می‌کند. کنسول 2 کاربرد اصلی دارد: مشاهده پیام های ثبت شده و اجرای جاوا اسکریپت .

کنسول را باز کنید

می توانید کنسول را به عنوان یک پانل یا به عنوان یک برگه در کشو باز کنید. برای یادگیری نحوه انجام، به باز کردن کنسول در مرجع ویژگی ما مراجعه کنید.

مشاهده پیام های ثبت شده

توسعه دهندگان وب اغلب پیام ها را به کنسول وارد می کنند تا مطمئن شوند که جاوا اسکریپت آنها مطابق انتظار کار می کند. برای ثبت یک پیام، عبارتی مانند console.log('Hello, Console!') را در جاوا اسکریپت خود وارد می کنید. وقتی مرورگر جاوا اسکریپت شما را اجرا می‌کند و عبارتی مانند آن را می‌بیند، می‌داند که قرار است پیام را در کنسول ثبت کند. به عنوان مثال، فرض کنید که در حال نوشتن HTML و جاوا اسکریپت برای یک صفحه هستید:

<!doctype html>
<html>
  <head>
    <title>Console Demo</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <script>
      console.log('Loading!');
      const h1 = document.querySelector('h1');
      console.log(h1.textContent);
      console.assert(document.querySelector('h2'), 'h2 not found!');
      const artists = [
        {
          first: 'René',
          last: 'Magritte'
        },
        {
          first: 'Chaim',
          last: 'Soutine'
        },
        {
          first: 'Henri',
          last: 'Matisse'
        }
      ];
      console.table(artists);
      setTimeout(() => {
        h1.textContent = 'Hello, Console!';
        console.log(h1.textContent);
      }, 3000);
    </script>
  </body>
</html>

شکل 1 نشان می دهد که کنسول پس از بارگذاری صفحه و 3 ثانیه انتظار چگونه به نظر می رسد. سعی کنید بفهمید کدام خطوط کد باعث شده است که مرورگر پیام ها را ثبت کند.