Browser DevTools

To access Chrome DevTools, simply click on the three-dot menu in the upper right corner of your browser, choose "More Tools", and then choose "Developer Tools". DevTools will open up alongside your browser window. You can customize where you would like the tools to display by clicking on the three-dot menu in the DevTools nav bar and selecting an option for "Dock Side". You can choose to have the DevTools display on the left, on the right, on the bottom, or in a separate window.

Here are some of the things that Dev Tools can do:

1. Inspect an HTML Element

Have you ever been writing UI automation and you just can't figure out how to access an element? With DevTools, you can right-click on the element and choose "Inspect", and the Elements pane of DevTools will show you the element in the HTML. You can then use this information to figure out the best way to access the element.

2. Edit HTML Elements

Not only can you find an element in the HTML, you can also edit it! This is great for security testing. Imagine that there is a page with a button that is hidden for users who are not admins. A malicious user could find that element using DevTools, remove the "hide" tag, and use the button. So it's helpful to try this while testing to verify that there's an additional check for user permissions when the button is used.

To edit an element, right-click on it in the HTML displayed in the Elements pane, and choose "Edit as HTML". Make whatever edits to the element you want, then click out of the edit box. You should see the element on the page change as a result of your edits.

3. View HTTP requests

If you click on the Network tab of DevTools, you can see all of the requests made to the server while using a web page. This includes API calls, which you can then copy and use in a tool like Postman. This feature is helpful for determining if your page is making the API calls that you are expecting, and it's also great for security testing. For example, just because the front-end of a web page doesn't allow a user to submit a field with more than 50 characters doesn't mean that it can't be done. If a malicious user copies the API call and submits it through Postman, through a curl command, or through some other tool, they may be able to send more than 50 characters directly to the server. This is why it's important to have both front-end and back-end validation on a website.

4. Simulate device frames

When you are testing a webpage, it's important to make sure that the page appears correctly on both laptops and mobile devices. But even the most well-equipped tester doesn't have access to every single device in use today. So DevTools comes with a simulator that shows roughly what your webpage will look like on various devices.

To access this feature, click on the device logo in the toolbar. This will open the simulator in the webpage side of the browser. Then you can use the dropdown to select specific devices (which seem to be a bit obsolete), or you can choose the "Responsive" setting and then manually expand or contract the window to get the size you want. The exact size is displayed in the navbar at the top.

5. Simulate performance on slower networks

Testing a webpage while in your office usually means you are using a great high-speed network. But what about your users who have slower connections? You can use DevTools to simulate slower connections and throttled CPU, which could help uncover race conditions in your application. To use this feature, go to the Performance tab in the navbar. In the Network dropdown, you can choose "Fast 3G", "Slow 3G", or "Offline", and in the CPU dropdown, you can choose "No throttling", "4x slowdown" or "6x slowdown". Don't forget to reverse your changes when you are done testing!

6. Investigate page load errors

As I was creating this post, I was reminded of one more way that DevTools are helpful. I was trying to upload the Chrome logo to my post, and the popup that I usually use to add an image was completely blank. I went to the Console tab of DevTools and saw that there was a 404 "File not found" error when I clicked on the Add Images button in Blogger. When you are testing your team's application and you've found a bug on a page, checking for errors in the console can help you give more information to your developers so they can get to the root of the problem more quickly.

Чтобы получить доступ к Chrome DevTools, просто щелкните меню из трех точек в правом верхнем углу браузера, выберите «Дополнительные инструменты», а затем выберите «Инструменты разработчика». DevTools откроется вместе с окном вашего браузера. Вы можете настроить, где должны отображаться инструменты, щелкнув трехточечное меню на панели навигации DevTools и выбрав опцию «Dock Side». Вы можете выбрать отображение DevTools слева, справа, внизу или в отдельном окне.

Вот некоторые вещи, которые могут делать Dev Tools:

1. Проверка HTML-элемента.

Вы когда-нибудь писали автоматизацию пользовательского интерфейса и просто не могли понять, как получить доступ к элементу? С помощью DevTools вы можете щелкнуть элемент правой кнопкой мыши и выбрать «Проверить», и панель «Элементы» DevTools покажет вам элемент в HTML. Затем вы можете использовать эту информацию, чтобы определить лучший способ доступа к элементу.

2. Редактировать элементы HTML

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

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

3. Просмотр HTTP-запросов

Если вы нажмете на вкладку «Сеть» в DevTools, вы увидите все запросы, сделанные на сервер при использовании веб-страницы. Сюда входят вызовы API, которые затем можно скопировать и использовать в таком инструменте, как Postman. Эта функция полезна для определения того, выполняет ли ваша страница ожидаемые вызовы API, а также отлично подходит для тестирования безопасности. Например, только потому, что внешний интерфейс веб-страницы не позволяет пользователю отправить поле с более чем 50 символами, не означает, что это невозможно сделать. Если злоумышленник копирует вызов API и отправляет его через Postman, команду curl или какой-либо другой инструмент, он может отправить более 50 символов непосредственно на сервер. Вот почему важно иметь на веб-сайте как внешнюю, так и внутреннюю проверку.

4. Имитация кадров устройства

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

Чтобы получить доступ к этой функции, нажмите на логотип устройства на панели инструментов. Это откроет симулятор на стороне веб-страницы браузера. Затем вы можете использовать раскрывающийся список для выбора определенных устройств (которые кажутся немного устаревшими), или вы можете выбрать настройку «Адаптивный», а затем вручную расширить или сузить окно, чтобы получить нужный размер. Точный размер отображается на панели навигации вверху.

5. Смоделируйте производительность в более медленных сетях

Тестирование веб-страницы в офисе обычно означает, что вы используете отличную высокоскоростную сеть. Но как насчет ваших пользователей, у которых более медленное соединение? Вы можете использовать DevTools для имитации более медленных подключений и дросселирования ЦП, что может помочь выявить условия гонки в вашем приложении. Чтобы использовать эту функцию, перейдите на вкладку «Производительность» на панели навигации. В раскрывающемся списке «Сеть» вы можете выбрать «Быстрый 3G», «Медленный 3G» или «Автономный режим», а в раскрывающемся списке «ЦП» вы можете выбрать «Без дросселирования», «Замедление в 4 раза» или «Замедление в 6 раз». Не забудьте отменить изменения, когда закончите тестирование!

6. Исследуйте ошибки загрузки страницы

Создавая этот пост, я вспомнил еще об одной полезности DevTools. Я пытался загрузить логотип Chrome в свой пост, но всплывающее окно, которое я обычно использую для добавления изображения, было совершенно пустым. Я перешел на вкладку «Консоль» DevTools и увидел ошибку 404 «Файл не найден», когда я нажал кнопку «Добавить изображения» в Blogger. Когда вы тестируете приложение своей команды и обнаружили ошибку на странице, проверка на наличие ошибок в консоли может помочь вам предоставить больше информации своим разработчикам, чтобы они могли быстрее добраться до сути проблемы.