您可以利用 Android Studio 的版面配置檢查器,
顯示檢視區塊階層,您可以在其中檢查每個檢視區塊的屬性。取代為
您可以利用版面配置檢查器比較應用程式版面配置和設計模擬圖
顯示應用程式的放大或 3D 檢視畫面,並前往以下網址查看應用程式版面配置的細節:
執行階段。如果您的版面配置是透過執行階段建構,而非全部透過 XML 建構,且版面配置無法如預期般運作,此方法便特別實用。
如果需要處理複雜的版面配置,您可以隔離個別檢視區塊,只讓部分版面配置顯示在「Component Tree」中,並且在「Layout Display」中轉譯。如要隔離檢視畫面,請擷取快照 ,然後在「Component Tree」中按一下檢視畫面的滑鼠右鍵,並選取「Show Only Subtree」或「Show Only Parents」。如要返回顯示完整的檢視區塊,請在檢視區塊上按一下滑鼠右鍵,然後選取「Show All」。您必須先拍攝快照,才能隔離檢視表。
[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間:2025-08-17 (世界標準時間)。"],[],[],null,["# Debug your layout with Layout Inspector\n\nThe Layout Inspector in Android Studio lets you debug the layout of your app by\nshowing a view hierarchy where you can inspect the properties of each view. With\nthe Layout Inspector, you can compare your app layout with design mockups,\ndisplay a magnified or 3D view of your app, and examine details of its layout at\nruntime. This is especially useful when your layout is built at runtime rather\nthan entirely in XML and the layout is behaving unexpectedly.\n**Figure 1.**Embedded Layout Inspector for the Jetchat app.\n\nGet started\n-----------\n\nTo start the Layout Inspector, [run your app](/studio/run), go to the\n**Running Devices** window, and click **Toggle Layout Inspector** .\nIf you switch among multiple devices or projects, the Layout Inspector\nautomatically connects to the debuggable processes running in the foreground of\nthe connected device.\n\nHere's how to do some common tasks:\n\n- To view hierarchy and inspect the properties of each view, use the **Component Tree** and **Attributes** tool windows. Layout Inspector might require an activity restart to access the attributes. For more information, see [View Attribute Inspection](#view-attribute-inspection).\n- To select views by single clicking directly on the views or navigate to code by double clicking on the views, enable **Toggle Deep Inspect** .\n- To interact with the app, disable **Toggle Deep Inspect** .\n- To inspect physical devices, enable [device mirroring](/studio/run/device#device-mirroring).\n- To enable live updates as you update your app's UI, check that [Live Edit](/develop/ui/compose/tooling/iterative-development#live-edit) is enabled.\n- To use [3D mode](#rotate-layout), take a Layout Inspector snapshot and then click **3D Mode** .\n\nSelect or isolate a view\n------------------------\n\nA view usually draws something the user can see and interact with. The\n**Component Tree** shows your app's hierarchy in real time with each view\ncomponent, which helps you debug your app's layout because you can visualize the\nelements within your app and the values associated with them.\n\nTo select a view, click it in the **Component Tree** or the **Layout Display** .\nAll of the layout attributes for the selected view appear in the **Attributes**\npanel.\n\nIf your layout includes overlapping views, you can see all the views in a region\nwhen you right-click in **Deep Inspect** mode\n. To select\na view that isn't in front, click it in the **Component Tree** or\n[rotate the layout](#rotate-layout).\n\nTo work with complex layouts, you can isolate individual views so that only a\nsubset of the layout is shown in the **Component Tree** and rendered in the\n**Layout Display** . To isolate a view, take a snapshot\n, right-click\nthe view in the **Component Tree** and select **Show Only Subtree** or\n**Show Only Parents** . To return to the full view, right-click the view and\nselect **Show All**. You must take a snapshot before isolating a view.\n| **Note:** The ability to isolate a view [is temporarily\n| unavailable](/studio/known-issues#layout-inspector-isolate-view). We're working on fixing this issue.\n\nHide layout borders and view labels\n-----------------------------------\n\nTo hide the bounding box or view labels for a layout element, click **View\nOptions**\nat the top of the **Layout Display** and toggle **Show Borders** or **Show View\nLabel**.\n\nCapture layout hierarchy snapshots\n----------------------------------\n\nLayout Inspector lets you save snapshots of your running app's layout hierarchy,\nso that you can share them with others or refer to them later.\n\nSnapshots capture the data you would typically see when using the Layout\nInspector, including a detailed 3D rendering of your layout, the component tree\nof your View, Compose, or hybrid layout, and detailed attributes for each\ncomponent of your UI. To save a snapshot, click **Snapshot Export/Import**\nand then\n**Export Snapshot**.\n\nLoad a previously saved Layout Inspector snapshot by clicking\n**Import Snapshot**.\n\n3D mode\n-------\n\nThe **Layout Display** features an advanced 3D visualization of your\napp's view hierarchy at runtime. To use this feature, take a snapshot\n, click\nthe **3D Mode** button\nin the\nsnapshot Inspector window, and rotate it by dragging the mouse.\n**Figure 2.**Rotated 3D view of a Layout. **Figure 3.** To expand or contract the layers of the Layout, use the **Layer Spacing** slider.\n\n### Compare app layout to a reference image overlay\n\nTo compare your app layout with a reference image, such as a UI mockup, you can\nload a bitmap image overlay in the Layout Inspector.\n\n- To load an overlay, select the **Load Overlay** option from the **Layout Inspector** toolbar. The overlay is scaled to fit the layout.\n- To adjust the transparency of the overlay, use the **Overlay Alpha** slider.\n- To remove the overlay, click **Clear Overlay**\n\nInspect Compose\n---------------\n\nLayout Inspector lets you inspect a Compose layout inside a running app in\nan emulator or physical device. You can use the Layout Inspector to check how\noften a composable is recomposed or skipped, which can help identify issues with\nyour app. For example, some coding errors might force your UI to recompose\nexcessively, which can cause poor performance. Some coding errors can prevent\nyour UI from recomposing and, therefore, preventing your UI changes from showing\nup on the screen.\n\n[Learn more about Layout Inspector for Compose](/develop/ui/compose/tooling/debug)\n\nView Attribute Inspection\n-------------------------\n\nLayout Inspector requires the following global setting to function properly: \n\n adb shell settings put global debug_view_attributes 1\n\nThis option generates extra information for inspection on all of the\nprocesses on the device.\n\nLayout Inspector automatically enables the setting when started. This\ncauses the current foreground Activity to restart. You will not see another\nActivity restart unless the flag is manually disabled on the device.\n\nTo disable the flag, run the following adb command: \n\n adb shell settings delete global debug_view_attributes\n\nAlternatively, turn off [Enable view attribute inspection](/studio/debug/dev-options#debugging)\nfrom your device's [developer options](/studio/debug/dev-options#enable).\n\nStandalone Layout Inspector\n---------------------------\n\nFor optimal performance, we recommend using the Layout Inspector in its default\nembedded mode. If you want to un-embed the Layout Inspector, go to **File**\n(**Android Studio** on macOS)\\\u003e **Settings** \\\u003e **Tools** \\\u003e **Layout Inspector**\nand clear the **Enable embedded Layout Inspector** checkbox.\n\nIn standalone mode, enable live updates by clicking the **Live Updates**\noption from\nthe **Layout Inspector** toolbar."]]