Javascript 如何在谷歌浏览器中拖动/重新定位检查元素工具?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/27772802/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to drag/re-position inspect element tool in google chrome?
提问by committedandroider
I am using Google Chrome browser. I did right click -> inspect element to open up the inspect element tool. This is what I currently see on my screen
我正在使用 Google Chrome 浏览器。我确实右键单击 - > 检查元素以打开检查元素工具。这是我目前在屏幕上看到的


Is there a way I can re-position/move the inspect element tool to the bottom of the browser screen? I tried looking this up https://www.google.com/#q=drag+and+drop+inspect+elementbut only found results for shortcuts to open the inspect element tool.
有没有办法可以将检查元素工具重新定位/移动到浏览器屏幕的底部?我尝试查找https://www.google.com/#q=drag+and+drop+inspect+element但只找到了打开检查元素工具的快捷方式的结果。
回答by Doorknob
You should be able to click and hold the little "two squares" icon next to the "close" icon, and it will reveal an option to move the DevTools to the bottom:
您应该能够单击并按住“关闭”图标旁边的小“两个方块”图标,它会显示一个将 DevTools 移动到底部的选项:


The half-filled rectangle will move the DevTools to the side/bottom, and the overlapping squares will pop the DevTools out of your browser into a separate window.
半填充的矩形会将 DevTools 移动到侧面/底部,重叠的方块会将 DevTools 从浏览器中弹出到一个单独的窗口中。
回答by Rahul Thube
My answer is based on Chrome 59 but currently applies to previous versions since then.
我的回答基于 Chrome 59,但目前适用于从那时起以前的版本。
As shown in image, you can click the 3 vertical dots on top right, then the menu below will appear, there you can click on your preferred arrangement (the darkened box portion shows where you would like to put the toolbar). In your case select the icon which has the bottom arrangement.
如图所示,您可以单击右上角的 3 个垂直点,然后会出现下面的菜单,您可以在那里单击您喜欢的排列(黑色框部分显示您想要放置工具栏的位置)。在您的情况下,选择底部排列的图标。


回答by Ravinda lakshan
In case you are a keyboard shortcut guy,
如果你是一个键盘快捷键的人,
- If you are in windows Cntrl+ Shift+ D
- In OSX ?+ Shift+ D
- 如果你在 windows Cntrl+ Shift+D
- 在 OSX ?+ Shift+D
回答by Ravinda lakshan
Just before the close icon in inspect element , there is docking icon.
If the docking is like single box icon, just click on it to toggle the inspect element between bottom and right.
If the docking icon is like double box icon , press the icon ,hold it and then move the cursor to the single box icon(which appears shortly after pressing the icon).
For more information visit here.
就在检查元素的关闭图标之前,有停靠图标。
如果对接就像单框图标,只需单击它即可在底部和右侧之间切换检查元素。
如果停靠图标类似于双框图标,请按住图标 ,然后将光标移动到单框图标(按下图标后不久会出现)。
欲了解更多信息,请访问此处。

