Консоль браузера что это

Консоль браузера

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

Что такое консоль в браузере?

Консоль — это инструмент для отладки скриптов, вывода служебной информации, а также сообщений о ходе работы и статусе выполнения скриптов. Консоль позволяет управлять содержимым веб-страницы посредством ввода определенных команд на языке JavaScript.

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

Как запустить консоль?

В первую очередь стоит отметить, что консоль можно запустить на любом сайте или статической странице, которые открыты в браузере. Консоль есть практически в каждом современном браузере и запускается клавишей F12 или Ctrl+Shift+I:

Давайте взглянем на элементы управления при работе с консолью:

1. Поле для ввода команд на языке JavaScript, команды вводятся без html тегов ;
2. Очистить консоль от ранее полученных сообщений и ошибок;
3. Отфильтровать все сообщения по признакам: ключевой фраз или типу сообщения;
4. Указание контекста, в котором работает консоль;
5. Preserve log — если галочка установлена, консоль будет хранить сообщения даже после перезагрузки страницы. Это полезно, если вы тестируете скрипт, который предусматривает переход к другой странице.

Как работать с консолью?

Давайте рассмотрим простенький пример. Я ввел следующий код для демонстрации:

throw new Error('Красным цветом бросаются исключения') console.log('Это сообщение может быть брошено из скрипта');

1. Пиктограмма, сообщающая и типе сообщения (например, > — ввод команды,
2. Сам текст сообщения или команды;
3. Номер строки, которая вызвала сообщение или исключение.

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

Поскольку все эти сообщения были вызваны посредством ввода команд в консоль, то и строки в третьей колонке показаны как VM784:2 . Последняя цифра (2) это и есть номер строки. Но он может выглядеть и по-другому:

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

Пара трюков из консоли

Теперь рассмотрим пару трюков, которые сможет выполнить любой владелец интернет магазина, даже без знаний HTML, JavaScript. Я дам уже готовые примеры.

Быстро установить все селекты в «Категории» у обработчика

Когда вы работаете с большими прайсами, то наверняка замечаете, как это муторно для каждой категории вручную выбрать из списка значение «Категория», вот я о чем:

Их могут быть сотни и даже тысячи. Если прикинуть, что на каждую категорию нужно потратить хотя бы пару секунд чтобы найти ее в списке и секунду, чтобы нажат по списку и выбрать значение, то получится, что мы потратим 3 секунды на каждый select и суммарно это может составить целый час, если сидеть непрерывно и выбирать-выбирать-выбирать. Это не наш случай.

Запустим консоль и введем в нее следующий код на странице обработчика прайсов XLS:

$('#sheet-0 select').val('cat')

Нажмем Enter и посмотрим результат:

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

Массово заполнить остатки для товаров

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

$('#goods-table-cont tr td:nth-child(5) input').each(function()< shopFieldEdit(this) $(this).val(999); shopFieldApply(this); >);

Важно! В скрипте присутствует цифра «5». Она обозначает номер столбца с «Наличием» в таблице, нумерация идет с единицы.

Что касается самого количества, которое нужно записать, то оно в данном примере равно 999. Вот несколько фишек по работе с остатками:

// Прибавить число к существующему $(this).val($(this).val() + 999); // Прибавить 20% $(this).val($(this).val() * 1,2);/ // Если остаток больше 100, ничего не делать, если меньше, то прибавить 50 $(this).val($(this).val() > 100 ? $(this).val() : $(this).val() + 50);

На этом все, продуктивной вам работы.

Chrome DevTools

Chrome DevTools — это набор инструментов, встроенных в браузер Google Chrome, для создания и отладки сайтов. С их помощью можно просматривать исходный код сайта, отлаживать работу frontend: HTML, CSS и JavaScript. Также DevTools позволяет проверять сетевой трафик, быстродействие сайта и многое другое.

Освойте профессию «Frontend-разработчик»

Как начать работу с DevTools

Инструмент используют инженеры по тестированию, веб-разработчики и другие специалисты. Открыть DevTools из браузера Google Chrome можно тремя способами:

1. Сочетанием горячих клавиш: для Windows и Linux Ctrl + Shift + I, для macOS cmd + Shift + I.
2. В контекстном меню: на странице в любом месте кликнуть правой кнопкой мыши и выбрать «Просмотреть код». Главное — не путать с «Просмотр кода страницы», эта опция покажет исходный код вне DevTools.
3. Через меню браузера: в правом верхнем углу нажать на три точки, в меню выбрать раздел «Дополнительные инструменты» и далее «Инструменты разработчика».

Профессия / 9 месяцев
Frontend-разработчик

Создавайте интерфейсы сервисов, которыми пользуются все

Какие вкладки есть в DevTools

Elements. Здесь отображается весь HTML- и CSS-код открытой страницы. На данной вкладке можно просмотреть и внести исправления в файлы CSS и JavaScript, изменить элементы DOM (программного интерфейса (API) для HTML- и XML-документов). Отредактировать HTML-элементы на странице, открытой в браузере, можно, кликнув по нужному элементу правой кнопкой мыши и выбрав пункт Edit as HTML. Изменения можно наблюдать в режиме реального времени. Манипуляции отображаются только в браузере и не видны другим пользователям. Для того чтобы применить исправленное, необходимо поработать с соответствующими файлами на веб-сервере.

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

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

Network. На вкладке отображаются сетевые запросы, который делает сайт. Как правило, ее используют при оптимизации скорости загрузки страницы, а также для мониторинга выполняемых запросов. Запросы к данным представлены в виде таблицы. Сверху расположены инструменты: очистка таблицы, включение и отключение записи запросов и другие. Под таблицей можно увидеть количество запросов, общее время загрузки всех данных, время загрузки DOM и ресурсов, участвующих в отображении текущей страницы.

Performances. Вкладка отображает нагрузку, которую создает сайт на компьютер пользователя. Здесь можно увидеть показатели FPS, загрузки CPU и сетевые запросы, необходимые данные и инструменты для повышения производительности страницы. На панели есть таймлайн использования сети, выполнения JavaScript и загрузки памяти. После первого построения таймлайнов можно найти данные о всем жизненном цикле страницы и выполнении кода.

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

Читайте также Кто такой frontend-разработчик?

Memory. Здесь расположено несколько инструментов, которые помогают отслеживать, какую нагрузку на систему оказывает выполнение кода:

• Heap Snapshot. С помощью него можно посмотреть, как распределяется память между объектами JavaScript и связанными с ними элементами DOM.
• Allocation instrumentation on timeline. Этот инструмент используется для устранения утечек памяти. Он показывает, как распределяется память между переменными в коде.
• Allocation sampling. Профайлер записывает, как распределяется память на отдельные функции JavaScript.

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

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

Станьте Frontend-разработчиком
и создавайте интерфейсы сервисов, которыми пользуются все

Lighthouse. На этой вкладке можно проверить производительность сайта.

• Performance. Позволяет узнать скорость загрузки сайта. Итоговый показатель зависит от времени загрузки интерактивных элементов, шрифтов и прочего контента, а также от времени блокировки и отрисовки стилей.
• Progressive Web App. Позволяет проверить, регистрирует ли сайт Service Workers, возможна ли работа сайта офлайн, а также возвращает ошибку 200.
• Best Practices. Помогает проверить безопасность сайта и узнать, применяются ли современные стандарты веб-разработки. На показатель влияет использование устаревших API, HTTPS, корректность кодировки и многое другое.
• Accessibility. Позволяет узнать, насколько удобен сайт, как воспринимается контент и можно ли управлять интерфейсом и передвигаться по сайту без мыши.
• SEO. Позволяет понять, насколько соблюдаются рекомендации Google по оптимизации сайта. На показатель влияют использование метатегов, наличие alt у изображений, адаптивная верстка и пр.

Каждый из показателей оценивается по шкале 100 баллов. Также для удобства оценка имеет цвет: зеленый — от 90 до 100 баллов, оранжевый — от 50 до 89 баллов, красный — ниже 49 баллов.

Основные инструменты и как их использовать

Поиск нужного DOM-элемента. На панели Elements находится полное DOM-дерево, которое можно просмотреть и изменить. Найти конкретный элемент можно двумя способами.

1. Выбор элемента на странице

Необходимо навести курсор, например на картинку на сайте, нажать правую кнопку мыши и выбрать «Просмотреть код». В DOM-дереве код выбранного элемента будет подсвечен.

2. Использование функции поиска HTML-компонента

Для этого надо кликнуть по кнопке со стрелкой в левом верхнем углу консоли, а затем — по необходимому элементу на странице.

Редактирование HTML. В консоли отображаются абсолютно все элементы: div, section, footer и т. д. Чтобы, например, изменить текст, достаточно кликнуть по нему два раза. Такие же действия доступны для классов и типов данных. Чтобы редактировать конкретную часть кода, нужно кликнуть по имени класса или самому слову class. Помимо этого, можно редактировать сразу большой участок текста или, например, названия атрибутов. Необходимо просто кликнуть правой кнопкой мыши по необходимому элементу и выбрать нужную опцию.

Работа с CSS. Под редактором HTML располагается консоль работы со стилями. В Chrome DevTools можно отключать и включать любое свойство одним кликом по чекбоксу слева. Также именно Chrome DevTools имеет удобную палитру для выбора оттенка цвета и позволяет настраивать угол наклона градиента. Здесь представлена визуализация отступов элемента, поэтому можно с легкостью настроить положение одного объекта относительно других. Это далеко не полный список всех удобных функций.

Поиск и исправление «мертвого» кода. Иногда в файлах CSS и JavaScript содержится много кода, который присутствует, но нигде не используется. Его наличие напрямую влияет на производительность сайта. В Chrome DevTools для этого предусмотрен инструмент Coverage. На панели со всеми основными вкладками (Elements, Console и т.д.) с правой стороны есть три точки. Необходимо кликнуть по ним и выбрать More Tools, где расположен Coverage. Внизу появится новая вкладка, где представлены данные о неиспользуемых CSS и JavaScript в процентном выражении. Если кликнуть по одному из них, можно увидеть все строки кода с цветовым обозначением: красные — используемые, синие — неиспользуемые. Чтобы повысить производительность сайта, нужно убрать неиспользуемый код.

Структурирование кода. Код, в котором отсутствуют «мертвые» элементы, улучшает производительность сайта, но сложен для восприятия (иногда бывают удалены даже пробелы и переносы строк). Chrome DevTools позволяет его структурировать. На вкладке Elements необходимо выбрать любой минифицированный ресурс (CSS, JS или HTML), после чего в новой вкладке отобразится содержимое, а снизу появится иконка с изображением фигурных скобок. Нажав на них, Chrome DevTools структурирует код, который подходит для внесения каких-либо изменений.

Просмотр внешнего вида сайта на разных устройствах. В режиме разработчика Google Chrome можно посмотреть, как выглядит текущая страница практически на любом устройстве. Сделать это можно комбинацией клавиш Ctrl + Shift + M для Windows и Linux и cmd + Shift + M для macOS. Также можно кликнуть на значок телефона в левом верхнем углу консоли. Теперь можно выбрать абсолютно любое разрешение или конкретное устройство из списка Dimensions. Также инструмент позволяет посмотреть, как будет отображаться страница при разной скорости интернета.

Это далеко не полный список всех возможностей и полезных функций Google Chrome Developer Tools. Но чтобы разобраться в них, необходимо рассматривать каждый инструмент подробно и в отдельности, соблюдая логическую структуру. Узнать подробнее вы можете на портале Chrome Developers в разделе документации DevTools.

Frontend-разработчик

Научитесь создавать удобные и эффектные сайты, сервисы и приложения, которые нужны всем. Сегодня профессия на пике актуальности: в России 9000+ вакансий, где требуется знание JavaScript.

Как использовать консоль браузера для выявления ошибок на сайте

Каждый браузер оснащен консольной панелью, с помощью которой разработчики проводят тестирование веб-сайта. Вкладка Elements содержит всю информацию об инспектируемом HTML-файле: теги, таблицы стилей и т.д. Но в консоли есть и другие разделы, такие как Console, Sources, Network и прочие.

Для каких целей они используются и как можно выявить ошибки через консоль – поговорим в сегодняшней статье.

Как открыть консоль на разных браузерах

Алгоритм запуска консоли (инспектора) во всех браузерах идентичен. Есть два пути: первый – запуск через специальную клавишу на клавиатуре, второй – через функцию «Посмотреть код страницы/элемента».

Например, если воспользоваться в Chrome клавишей F12, то откроется дополнительное окно с консолью.

Второй путь заключается в просмотре кода текущей страницы – для этого необходимо кликнуть правой кнопкой мыши по любому элементу сайта и в отобразившемся меню выбрать опцию «Посмотреть код». Обратите внимание, что это название опции в Google Chrome, в других браузерах оно может отличаться. Например, в Яндексе функция называется «Исследовать элемент».

В результате перед нами снова отобразится окно, в котором будет открыта главная вкладка с кодом страницы. Подробнее о ней мы еще поговорим, а пока давайте посмотрим, как выполняется запуск консоли в браузере Safari на устройствах Mac.

Первым делом нам потребуется включить меню разработчика – для этого переходим в раздел «Настройки» и открываем подраздел «Продвинутые». Находим пункт «Показать меню «Разработка в строке меню» и отмечаем его галочкой.

Теперь можно запустить консольное окно – достаточно воспользоваться комбинацией клавиш «Cmd+Opt+C».

Как видите, запустить консоль в браузере – дело нескольких секунд. Опция полезна, когда вы верстаете новый сайт, исправляете ошибки, проводите различные тесты.

Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей

Какие вкладки есть в консоли и за что они отвечают

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

Перед тем как перейти к разбору каждой вкладки, давайте рассмотрим основное элементы, которые могут быть полезны при работе с консолью. Первый – это включение адаптивного режима. Для этого необходимо открыть консоль и в верхнем левом углу нажать на кнопку в виде телефона/планшета.

В результате левая часть окна будет немного изменена: добавятся кнопки для выбора разрешения под нужный девайс. Например, выберем устройство iPhone X, и сайт сразу же будет выглядеть так, как он выглядел бы на телефоне.

Если выбрать опцию «Responsive», то слева от страницы отобразится дополнительная линия, которую мы можем тянуть влево или вправо – с помощью нее можно подобрать необходимое разрешение страницы. Также настроить разрешение мы можем и в верхней части окна.

И еще одна опция, которая может быть полезна – изменение расположения консольной панели. Чтобы ей воспользоваться, необходимо в верхней правой части нажать на кнопку в виде троеточия и в строке «Dock side» изменить ориентацию. Доступные положения: справа, слева, снизу, в отдельном окне.

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

Elements

Основной компонент для верстальщиков. Он включает в себя всю информацию об открытой HTML-странице. Здесь мы можем не только посмотреть текущие теги и атрибуты, но и изменить их – в таком случае произойдет автоматическое изменение дизайна на странице. Если ее обновить, все вернется на свои места. Также открыт доступ к просмотру CSS и прочих элементов – для этого в правой части раздела идут вкладки Styles, Computed, Layout, Event Listeners, DOM Breakpoints, Properties и Accessibility.

Console

Еще одна важнейшая вкладка для верстальщиков – это Console. В ней мы можем узнать информацию о текущих ошибках на сайте, посмотреть исполняемый JavaScript-код, если он выведен в консоль с помощью метода console.log, и многое другое.

Если вам нужно очистить информацию, выведенную в консоль, то сделать это легко. Достаточно в верхнем левом углу нажать на кнопку в виде знака запрета.

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

Sources

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

Сама вкладка, как видите, разделена на 3 части. В первой содержится дерево иерархии файлов, относящихся к сайту. Вторая предназначена для просмотра содержимого этих файлов и выполнения их отладки. Для ее запуска необходимо воспользоваться последним окном.

Network

Из названия уже понятно, что данный раздел предназначен для отслеживания сетевого трафика. Его основная функция – запись сетевого журнала. Можно выявить время загрузки и обработки различных файлов, чтобы впоследствии оптимизировать страницу.

Performance

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

Memory

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

Application

Данный раздел позволяет инспектировать и очищать все загруженные ресурсы. Мы можем взаимодействовать с HTML5 Database, Local Storage, Cookies, AppCache и другими элементами.

Основная особенность опции – чистка куки. Если вам необходимо выполнить эту процедуру, то просто откройте в левой части раздел «Cookies» и нажмите справа на значок запрета. Куки для выбранной ссылки будут очищены.

Security

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

• проверке сертификата – подтвердил ли сайт свою подлинность TLS;
• tls-соединении – использует ли сайт современные безопасные протоколы;
• безопасности второстепенных источников.

Lighthouse

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

Выявление основных ошибок

При возникновении возможных ошибок мы сразу будем об этом уведомлены во вкладке Console – в ней отобразится информация с красной строкой текста. Рассмотрим самые распространенные ошибки, которые могут возникать в Google Chrome, Safari и Internet Explorer:

1. Uncaught TypeError: Cannot read property. Ошибка возникает в Хроме при вызове метода или чтении свойства для неопределенного объекта.
2. TypeError: ‘undefined’ is not an object (evaluating). Аналогична предыдущей ошибке, но только в Safari.
3. TypeError: null is not an object (evaluating). Возникает в Сафари при вызове метода или чтении свойства для нулевого объекта.
4. (unknown):Scripterror. Обозначает ошибку скрипта.
5. TypeError: Object doesn’t support property. Встречается в Internet Explorer – возникает при вызове определенного метода.
6. TypeError: ‘undefined’ is not a function. Указывает на неопределенную функцию (в Chrome).
7. Uncaught RangeError: Maximum call stack. Ошибка в Chrome, означающая превышение максимального размера стека.
8. TypeError: Cannot read property ‘length’. Невозможно прочитать свойство.
9. Uncaught TypeError: Cannot set property. Возникает, когда скрипт не может получить доступ к неопределенной переменной.
10. ReferenceError: event is not defined. Обозначает невозможность получения доступа к переменной, не входящей в текущую область.

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

Заключение

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

Изучайте и находите свои применения этому инструменту – он может многое. Удачи!

Консоль браузера. Эффективная работа. Введение.

Как находить конкретное место в коде HTML, CSS или Javascript файлов, которое отвечает за вывод какого-то эффекта на сайте.

Курс «Консоль браузера. Эффективная работа.»

Видеокурс записан на основе работы с консолью в браузере Chrome. Аналогичная консоль используется в Яндекс Браузере.Для остальных браузеров принципы работы с консолью остаются теми же самыми. Самое главное понять смысл работы. Чему можно научиться из курса?

• Как удобно расположить консоль в любом месте экрана.

• Основные принципы работы с консолью, как это вообще работает.

• Как легко находить, изменять, добавлять или удалять новые HTML-элементы и CSS-стили на веб-странице.

Это позволит вам «примерять» и предварительно посмотреть как будет выглядеть веб-страница с теми или иными изменениями НЕ внося изменения в исходный код веб-страницы.

• Как быстро перемещаться между элементами в «дереве» документа и быстро находить нужные элементы.

• Вы научитесь скачивать к себе на компьютер какие-то картинки, части кода, стили оформления CSS и любые другие элементы с любого сайта в Интернет. Далее это уже можно применять на своих сайтах как готовые наработки. Это может сэкономить кучу времени.

• Как находить конкретное место в коде CSS или Javascript файлов, которое отвечает за вывод какого-то эффекта на сайте.

Какой конкретно файл за это отвечает? Где он находится на сервере? Какая строка кода за это отвечает?

• Ловим стили оформления для элемента, которые у него появляются при наведении курсора мыши на него (эффект hover).

• Как посмотреть как будет выглядеть веб-страница на мобильных устройствах (телефоне и планшете) с помощью консоли браузера?

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

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

• Какие инструменты консоли позволят вам узнать причину медленной загрузки страниц вашего сайта?

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

Дмитрий Ченгаев ��
Занимаюсь заказной веб-разработкой. Подписывайтесь на телеграм канал https://t.me/dchengaev 😉
2020-12-06

Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:

Верстка, HTML и CSS.

• Быстрый старт в HTML для начинающих.
• Фундамент CSS. Значения.
• Блочная и строчная модель CSS.
• Основы позиционирования элементов. CSS.
• Фундамент CSS. Основы и выборка элементов (селекторы).
• Позиционирование на Flexbox в CSS.
• Ускоренная верстка веб-страниц с помощью фреймворка Bulma.
• Работа с медиа-запросами в CSS.

• Вводный курс Javascript.
• Javascript. Работаем с HTML и CSS (DOM).
• Javascript. Работа с событиями.
• Библиотека. React dnd. Drag and drop.
• Разработка расширений Google Chrome

• Базовый курс Vue.js
• Библиотека Vue.Draggable
• Вопросы установки и подключения Vue.js
• Центральное хранилище Vuex
• Система аутентификации Vue.js
• Базовые компоненты форм Vue 3.
• Библиотека для создания таблиц на Vue 3. vue3-easy-data-table
• Vee-validate 4. Валидация форм Vue 3.

Серверная часть веб-разработки.

• Основы языка SQL.
• Локальные хранилища браузеров.
• Разворачиваем PHP, Apache, MySQL на Ubuntu 22
• Firebase. Realtime database. Работа на PHP.
• Основы Redis для веб-разработчиков
• Базы данных
• API. Основы работы.
• Composer.
• Веб-сервер Apache.
• Разное

• Язык программирования PHP. Основы.
• Объектно-ориентированное программирование на PHP.

• Быстрый старт в Symfony 6
• Шаблонизатор Twig в Symfony.
• Symfony. Работа с переменными окружения.
• Symfony. Работа с сервисами и бандлами (bundles).
• Symfony. Работа с базой данных. Основы.
• Symfony. Работа с базой данных. Связи.
• Наследование сущностей Doctrine (на примере Symfony)
• Symfony 6. Аутентификация пользователей через login форму.
• Symfony. Создание API-платформы.
• Основы работы с файлами в Symfony на примере загрузки изображений.
• Работа с бандлом Doctrine Extensions.
• Symfony. Работа с формами.
• Админка на EasyAdmin в Symfony
• Query Builder
• Docker для Symfony
• Deploy. Symfony.
• Symfony 6. Связка с Vue приложением.
• Symfony. Практика работы с многоязычными сайтами.
• Слушатели и подписчики событий Symfony
• Mercure Hub и Symfony
• Symfony. HttpClient.
• Symfony. Тесты.
• Symfony Messenger. Работа с очередями сообщений.

• Быстрый старт в Laravel
• Переменные окружения в Laravel
• Основы работы с базой данных в Laravel

Техническая сторона веб-аналитики сайтов.

• Яндекс Метрика для начинающих. Основы.
• Яндекс.Метрика. Работа с целями.
• Google Tag Manager.
• Разное

• Основы работы с WordPress
• Дочерние темы WordPress. Правки, которые сохраняются при обновлении.
• Иерархия шаблонов WordPress
• Минимальная тема WordPress своими руками.
• Произвольные поля WordPress.
• WordPress. Работа с базой данных.
• Шорткоды (shortcodes) WordPress.
• WordPress. Разное.

SEO и продвижение сайтов.

• Полезные инструменты для веб-разработчиков
• Git. Система контроля версий.
• Текстовый редактор vi (vim).
• Командная строка unix-подобных систем
• Операционные системы для веб-разработчика.
• Gulp
• GitHub
• Плагин Emmet
• PhpStorm
• Консоль браузера. Эффективная работа.
• Основы Docker для веб-программистов.
• Insomnia. API (REST) клиент.

• Услуги по WordPress
• Услуги. Веб-аналитики.
• Разработка и автоматизация веб-проектов

• API. Яндекс.Метрика.
• Logs API. Яндекс.Метрика.
• Работа с API amocrm с PHP и Python. OAuth 2.
• Работа с сервисами Яндекс.Облака
• API.Ozon.

Google Apps Script

• Принципы программирования
• Теория архитектуры MVC.

Здравствуйте. Меня зовут Дмитрий Ченгаев.

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

[+] HTML
[+] CSS
[+] PHP
[+] Верстка сайтов
[+] Javascript
[+] других инструментах, которые помогают решать задачи веб-разработки проще и быстрее.

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

Если у вас возникают какие-то вопросы или непонятные моменты, пишите в «личку» или в комментариях на этом сайте. Постараюсь помочь.