这些工具默认在chrome窗口的底部打开。对于宽屏幕显示来说,这是一个相当糟糕的选择,因为右侧有大量的空白空间,但没有太多的垂直空间。不幸的是,我找不到重新放置工具的方法。我想把它们放在一边,类似于firebug。

唯一的选择类似于我想要的是分离开发工具和放置chrome和工具窗口并排。这对于快速地从IDE切换到浏览器并返回alt选项卡不是很方便,所以一个“集成”的解决方案会很好。


当前回答

在我把我的码头放在右边之后(见以前的答案),我仍然发现面板垂直分裂。

要水平拆分面板——甚至可以从屏幕宽度中获得更多——请转到设置(右下角),并取消“当停靠到右侧时垂直拆分面板”的检查。

现在,你有了从左到右的所有面板:p

其他回答

Chrome 46或更新版本

单击垂直省略号按钮(),然后选择所需的对接选项。

Chrome 45或以上版本

长按右上方的dock图标。它会弹出一个选项来更改对接

要更改HTML和CSS面板之间的分割,请在DevTools中选择“设置(F1) > General > Appearance > Panel Layout”。

把你的指针放在dock按钮上,然后长按它(几秒钟),或者根据浏览器版本左右点击鼠标。

键盘快捷键切换对接位置(侧/下)

CTRL + SHIFT + D

有很多捷径你可以去看看

设置»快捷方式,如下所示:

或者,使用CTRL + ?去设置,从那里可以到达左边的“快捷方式”子项或使用官方引用。

此外,如果你想在一个窗口中看到源代码和控制台,请转到:

“自定义和控制DevTools ->”显示控制台抽屉

你也可以在右上角看到它:

在我把我的码头放在右边之后(见以前的答案),我仍然发现面板垂直分裂。

要水平拆分面板——甚至可以从屏幕宽度中获得更多——请转到设置(右下角),并取消“当停靠到右侧时垂直拆分面板”的检查。

现在,你有了从左到右的所有面板:p