Как выровнять вкладки в chrome-dev-menu по горизонтали вместо выравнивания по вертикали для расширения React-dev tools?

#reactjs #google-chrome-devtools #react-devtools

Вопрос:

Я создаю ReactApp и для отладки использую React-Dev-Tools,

при тестировании состояний компонента он показывает два меню рядом, с левой стороны <React/> code и с правыми значениями состояний.

экран отладки разделен по вертикали между двумя.

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

экран преподавателя = более читаемый код, благодаря выравниванию по горизонтали.

но мое экранное пространство тратится впустую из-за вертикального разделения, такого как это,

Я также попробовал dock (меню отладчика) внизу, но оно более читабельное.

Как я могу выровнять два меню / вкладки по горизонтали в Chrome tools, хотя я сбросил настройки в меню отладки?

Редактировать 1: после получения решения.

после увеличения размера шрифта экран не разделяется по вертикали, и я получаю тот же chrome-dev-tools-screen, что и у моего преподавателя.

1. TLDR; ctrl , чтобы получить вертикальное разделение, также сначала щелкните на экране отладки, затем увеличьте размер экрана на ctrl , не увеличивая размер окна просмотра.

Ответ №1:

Вертикальное разделение происходит, когда вы уменьшаете размер окна dev-tools. Эта функция описана на этой странице github:https://github.com/facebook/react-devtools/pull/541

Вот видео, демонстрирующее это:https://www.youtube.com/watch?v=RdKVJEy41M4

1. спасибо, что объяснили это, я проверил, когда ширина экрана меньше 965 пикселей, экран разделяется по вертикали. но когда я изменил уровень масштабирования на CTRL , он не разделяется на 965 пикселей. Я также добавил скриншот результирующего экрана.

Ответ №2:

Вы можете разделить вкладки по горизонтали в Chrome 87 (и посмотреть одну из них). Щелкните правой кнопкой мыши Сеть в меню и выберите «Переместить вниз»