如何在 chrome 中關閉 css 的功能以進行測試，例如 css grid

Question

我正在嘗試查看當 css 網格不可用時我的應用程序的外觀。 是否可以關閉 chrome 或 Canary 內部的 css grid 等屬性？

Answer 1

在https://caniuse.com/#search=shape-outside上檢查后，下載不支持此功能的舊版 Chrome。

Answer 2

Chrome 的CSS Feature Toggles插件可以做到這一點。 它在開發人員工具箱中添加了一個選項卡，其中包含各種 CSS 功能的復選框，這些功能在瀏覽器中很流行，但無法實現，例如 Grid：

選中相關框將禁用相應的功能。

Answer 3

只需注釋掉 CSS Grid。

/* .container { display: grid; } */

或者在開發工具中取消選中規則。

Chrome 將忽略所有網格屬性，就像瀏覽器不支持該功能一樣。