Инструменты разработчика браузера, объясняется обучением, чтобы стать шеф-поваром

1656576372 instrumenty razrabotchika brauzera obyasnyaetsya obucheniem chtoby stat shef povarom

Кевин Кононенко

1*zdQasZBj8_S3hYF4CAgbHw

Если вы когда-либо посещали ресторан, это руководство поможет вам понять, как работают инструменты разработчика, например Chrome Dev Tools, и текстовые редакторы, такие как Sublime Text.

Когда вы создаете свой первый веб-сайт с помощью HTML и CSS, вы можете легко перегрузиться по всем новым технологиям, которые необходимы для развертывания даже базового сайта.

Услуги хостинга?

Текстовые редакторы?

Файловые каталоги?

Все эти технологии выходят далеко за рамки учебных пособий, которые вы, возможно, пробовали на таких сайтах как freeCodeCamp и Codecademy!

Итак, я решил, что краткое руководство по использованию текстовых редакторов и инструментов разработчика устранит одну запутанную часть процесса.

На самом деле все это очень напоминает способ, которым шеф-повар ресторана может создавать новые блюда для обслуживания клиентов. Подумайте о концепции рецепта. Рецепт – это определенный набор инструкций и ингредиентов, которые готовят ту же еду снова и снова. Как вы скоро увидите, процесс разработки нового рецепта похож на создание сайта с помощью HTML и CSS.

0*F-EL1qZ_NXoH7-Cd

Чтобы понять этот учебник вам просто нужно знать основы HTML и CSS. Давайте прыгнуть в него.

Сравнение рецепта и переднего кода

Давайте подумаем об основной цели быть шеф-поваром. Ваша цель – превратить рецепты в вкусную еду для клиентов. Конечно, становится сложно, если учесть все факторы, которыми нужно жонглировать сразу: поступление заказов, разное время и т.д. Но давайте на миг забудем об этом.

Вот как может смотреться ресторанная система.

0*B0f0CXgRdEfzZUBO
  1. Шеф-повар разрабатывает рецепт, который будет использоваться каждый вечер в ресторане. Кухонный персонал может повторять его снова и снова и превращать в ту же еду каждый вечер.
  2. Кухня следует инструкциям по рецепту
  3. Конечным продуктом является блюдо (в данном случае похоже на макароны и фрикадельки, что это за шеф-повар?)

Аналогично, когда вы создаете веб-сайт, вы должны написать код, который может быть интерпретирован браузером, чтобы тот же веб-сайт можно было обслуживать посетителям со всего мира.

0*5FogkHgSQE8DdXMW
  1. Вы пишете код с помощью HTML, CSS и JavaScript, который создаст полную веб-страницу
  2. Браузер интерпретирует этот код и преобразует его в GUI (графический пользовательский интерфейс)
  3. Посетитель сайта чувствует сайт (например, Google.com)

Каждый раз, когда вы посещаете определенный веб-сайт, называется «сессии“. Каждый раз, когда вы открываете страницу на новой странице домена (например, Google.com или Facebook.com) начинается новый сеанс, который продолжается до тех пор, пока вы не покинете домен. Таким образом, один человек может посетить несколько страниц в течение сеанса. Сеанс напоминает посещение ресторана.

Что такое инструмент разработчика?

Инструменты разработчика позволяют проверить базовый код веб-сайта и поиграть с ним. Если вы используете веб-браузер Chrome, можно использовать, например, инструменты разработчика Chrome. Просто щелкните правой кнопкой мыши в любом месте страницы и выберите «Проверить» последнюю опцию в меню.

Инструменты разработчика позволяют манипулировать стилями, структурой и JavaScript на странице в рамках отдельного сеанса. Но эти изменения не будут продолжаться, если вы обновите страницу и начнете новый сеанс.

0*55kT4xY-Ei77yv8s

В этом случае я изменил цвет фона введение элемент на синий. Весьма скучная вещь. Вы можете перейти на любой другой веб-сайт и сделать то же самое. Конечно, изменения никогда не будут продолжаться после вашей индивидуальной сессии.

Это как быть тем человеком в ресторане, который готовит вкусную еду… и кладет на нее острый соус. Потому что вы тот тип человека, который любит острый соус ко всему. ?

0*AC9vkIwvCUgtmLoY

Ваша любовь к острому соусу никак не повлияет на сам рецепт. Это не повлияет на другие подобные блюда, которые будут подаваться в эту ночь. А если вы отправитесь в другой ресторан, вам придется снова просить острый соус.

0*UhPaUxJpiboe_T27

Таким же образом вы можете использовать инструменты разработчика, чтобы играть с кодом в другом домене, но это не окажет никакого влияния за пределами конкретного сеанса в этом домене.

Использование инструментов разработчика при создании первого веб-сайта

Как шеф-повар, ваша работа – придумывать рецепты, которые приведут к блюдам, которые любят клиенты. Но ты видимо не хочу выяснить это, изобретя рецепт, дав его кухонному персоналу, а затем узнав, нравится ли он клиентам или нет.

Вместо этого вы, вероятно, захотите испытать кучу рецептов на собственной кухне, а затем выпустить тот, который кажется вам лучшим.

Это снимает всю сложность работы с кухонным персоналом и изготовление большого объема еды. Вы одновременно выполняете роль и шеф-повара, и клиента.

0*BglqPJucNuE0AOzL

Обратите внимание, что в этом случае вы контролируете как рецепт, так и конечный продукт. Таким образом, вместо того, чтобы предлагать клиентам одно блюдо, вы можете создать часть рецепта, а затем комбинировать ингредиенты разными способами. Затем можно настроить рецепт, чтобы отобразить эффективные комбинации.

Когда вы создаете свой первый веб-сайт, вы также должны использовать исходный код вместе с инструментами разработчика, чтобы настроить свой веб-сайт на ноутбуке или компьютере.

0*8CxZHcH6Lljbk4KV

Текстовый редактор (например, Sublime Text, Vim или Emacs) – это инструмент, позволяющий изменять оригинальный рецепт – файлы HTML, CSS и JavaScript.

Однако поскольку вы настраиваете свой браузер в режиме реального времени, вы, вероятно, не захотите менять «рецепт», сохранять файл и перезагружать страницу каждый раз. Это истощает!

Вы можете сократить этот цикл обратной связи, внеся изменения с помощью инструментов разработчика, а затем откорректировав «рецепт» после того, как вы создадите что-то, что стоит сохранить в самом браузере.

Помните: если вы создадите что-нибудь ценное с помощью инструментов разработчика, но затем обновите страницу, ваши изменения исчезнут. Даже если файл находится локально на вашем компьютере.

Инструменты разработчика работают только для интерфейса

Конечно, в ресторане одновременно происходит много процессов, поддерживающих шеф-повара. Есть человек, который приветствует вас в дверях, серверы, бригада уборки, бармен и т.д.

0*vcuFkRYKEKX3vyhy

Это те люди, которые не занимаются переводом рецептов на еду, но помогают в ведении работы ресторана.

Это что-то напоминает серверный код, или бэк-энд. Хотя вы также пишете код на стороне сервера с помощью текстового редактора, вы не можете вносить какие-либо изменения с помощью инструментов разработчика.

Почему? Ну, вы можете себе представить, если бы отдельным клиентам разрешили изменять правила ресторана, если они могут менять свою еду? Это было бы безумием! Клиенты не могут изменить способ работы ресторана, как бы они этого не хотели.

0*7jJULiF0FDXjRoZ8

Инструменты разработчика позволяют только настраивать HTML, CSS и JavaScript. Они не раскрывают код на стороне сервера, поскольку это позволит кому-либо обнаружить какие-либо уязвимости безопасности в веб-приложении. Но код на стороне сервера также пишется в текстовом редакторе.

Если вы хотите узнать больше о настройке кода на стороне сервера в первый раз, просмотрите мое руководство по концепции локального хоста.

Получите новейшие пособия

Вам понравился этот урок? Дайте ему «хлопок»? или зарегистрируйтесь здесь, чтобы получить последние визуальные пособия по темам веб-разработки.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *