Головна » Інструментарій » Як увімкнути програму Chrome DevTools для віддаленого налагодження

    Як увімкнути програму Chrome DevTools для віддаленого налагодження

    Програму Chrome DevTools створює Кеннет Аухенберг (Kenneth Auchenberg), щоб вивести devtools з браузера - у цьому випадку з браузера Chrome. Ця програма побудована на основі NW.js і може працювати на Mac OS X, а також на Linux і Windows.

    Є багато причин, які спонукали виробника створити це, але його бачення полягає в наданні розробникам зручності віддалене налагодження в декількох веб-переглядачах, все з однієї уніфікованої платформи (програми). Ідея займе деякий час, щоб вловити і матеріалізуватися з-за різних причин (і опору, які ви можете прочитати на його блозі).

    Ми коротко розглянемо програму Chrome DevTools і дізнаємося, що Google має запропонувати розробникам.

    Докладніше про Hongkiat:

    • Початок роботи з інструментами розробників Chrome
    • 5 (Докладніше) Корисні поради для Chrome DevTools для розробників
    • Як налаштувати тему Google Chrome DevTools

    Установка

    Завантажте Chrome-Devtools.app.zip і розпакуйте його. Двічі клацніть, щоб запустити. Запустіть браузер Chrome і ввімкніть віддалене налагодження.

    Щоб зробити це на Mac, відкрийте термінал і запустіть команду нижче:

    sudo / Програми / Google Chrome.app/Contents/MacOS/Google Хром-віддалене-налагодження-порт = 9222

    Якщо ви запускаєте вікна, відкрийте командний рядок і скористайтеся цією командою:

    start chrome.exe -remote-debugging-port = 9222

    Як використовувати

    Коли ваш Chrome вже відкрито, з віддаленою функцією налагодження, тепер можна переглядати будь-який сайт. Наприклад, ми відкрили Hongkiat.com для цієї вправи. Далі ми переходимо до вікна програми Chrome DevTools і оновити цей список (кнопка знаходиться в нижньому правому куті).

    Тепер ви побачите перелік посилання Hongkiat.com (як показано нижче).

    Тепер натисніть кнопку "Перейти". Ви перейдете до нового вікна. Це воно. Додаток Chrome DevTools вже запущено. Те, що ви побачите тут, так само, як і коли ви "перевіряєте елемент" на веб-переглядачі Chrome.

    Звідси ви можете скористатися програмою Chrome DevTools, так само як і за допомогою DevTools на Chrome: ви можете перевірити елемент DOM, налагодити JavaScript, працювати з консоллю та багато іншого.

    Що далі?

    Ця програма все ще дуже експериментальна. Але поки що ідея виведення DevTool з Chrome дозволяє розробникам розглядати цю програму як функціональний редактор, а також працювати з іншими режимами роботи, такими як node.js і iOS. Для отримання додаткових можливостей, ви можете перевірити потяг думки Auchenberg тут.