问题
The Firefox DevTools Inspector panel in Firefox 48 the changed the position of the ancestor elements breadcrumb bar from the top to the bottom. How I can revert the change?
回答1:
This was obviously changed in bug 1256422 (unfortunately without explaining the reason) and there is no setting to move the breadcrumb bar to the top again.
So I see three options:
- Accept the change.
- Revert back to Firefox 47.
- Create a bug report asking to move it back to the top.
回答2:
Based on the information you provided on the page you linked in a comment (where you have code for use with the Stylish add-on, or as a user script), which was based on work by the user Aris on mozillaZine, I determined that though Firefox 51 (currently Firefox Developer Edition) you can add the following to your userChrome.css file:
@namespace html url(http://www.w3.org/1999/xhtml); /* set html namespace */
html|div#inspector-breadcrumbs-toolbar {
-moz-box-ordinal-group: 0 !important;
border-top: unset !important;
margin-right: 210px !important;
margin-left: 28px !important;
}
html|div#inspector-toolbar {
margin-top: -23px !important;
}
If you are using Firefox 52, currently Nightly, this will not work. In fact, using it will result in loosing access to the toolbar containing the DOM search box and the create a new node button.
In order to display more entries in the breadcrumbs, I also found it desirable to reduce both the space between the breadcrumbs and the minimum width of an entry:
html|button.breadcrumbs-widget-item {
padding-left: 10px !important;
margin-right: -12px !important;
min-width: 10px !important;
}
If you are really wanting to save horizontal space, you could change the graphic that is used to separate the breadcrumbs. You could also adjust the font size to allow more information to be displayed.
来源：https://stackoverflow.com/questions/39713003/how-to-revert-position-change-of-breadcrumb-bar-in-firefox-devtools-inspector-in