Find and export CSS changes

If you spent time changing CSS in DevTools, either in the Rules panel (in Firefox), or in the Sources or Styles panels (in Chrome or Edge), and you don't remember all of the changes you made, you can find and extract them easily from:

In Firefox or Safari:
The Changes panel (in the Inspector), which allows you to copy all changes, or copy a given CSS rule
In Chrome or Edge:
The Changes panel (which you can open from the command menu by typing ctrl+shift+P or cmd+shift+P)
Categories:

• css
• highlighter

Supported by:

• [[图片上传失败...(image-a18e4c-1719849592543)]

  firefox](https://devtoolstips.org/browser/firefox/ "List all tips supported by firefox")

Firefox features a position editor that lets you move elements in the page by drag and drop. This works with elements that are positioned in CSS with position:relative or position:absolute and that have at least one of top, right, bottom and left defined.

• Select an element with position:relative or position:absolute applied to it in the Inspector panel.
• Open the Layout sidebar panel, and scroll down to the Box Model section.
• Find the "Edit Position" icon and click it.
• Use the handles in the page to move the element around, within its positioned ancestor.

Learn more about this tool here