X
點擊此處開啟此網站的行動版。

技術支援討論區

Can Firefox developer tools autocomplete tailwind/bootstrap classes?

已張貼

When I develop web apps, I want to see adding and removing CSS classes in real time, like Chrome devtools do.

I use tailwind CSS heavily (https://tailwindcss.com/) which relies on adding CSS classes to change appearance. The same applies to bootstrap 4 styles.

Chrome devtools autoloads the CSS classes from tailwind, and shows updates to the page as I type. To try this out:

1. go to https://tailwindcss.com/ in chrome/chromium 2. open devtools (f12) 3. switch to the "Elements" tab 4. use the element picker to select the "Get Started" button 5. in the right hand panel, select the ".cls" icon 6. in the box that says "Add new class", type "text-" 7. notice the dropdown and if you change the value (e.g. to text-blue-500) the page updates

In firefox devtools with the equivalent ".cls" feature:

  • the classes do not auto-populate
  • changes are not shown until the enter key is pressed.

For me personally this is the only feature I use chrome for. Firefox completely satisfies me for all other usage.

Is this something that can be implemented? I have reasonable software development skills so would be willing to assist with this change.

When I develop web apps, I want to see adding and removing CSS classes in real time, like Chrome devtools do. I use tailwind CSS heavily (https://tailwindcss.com/) which relies on adding CSS classes to change appearance. The same applies to bootstrap 4 styles. Chrome devtools autoloads the CSS classes from tailwind, and shows updates to the page as I type. To try this out: 1. go to https://tailwindcss.com/ in chrome/chromium 2. open devtools (f12) 3. switch to the "Elements" tab 4. use the element picker to select the "Get Started" button 5. in the right hand panel, select the ".cls" icon 6. in the box that says "Add new class", type "text-" 7. notice the dropdown and if you change the value (e.g. to text-blue-500) the page updates In firefox devtools with the equivalent ".cls" feature: * the classes do not auto-populate * changes are not shown until the enter key is pressed. For me personally this is the only feature I use chrome for. Firefox completely satisfies me for all other usage. Is this something that can be implemented? I have reasonable software development skills so would be willing to assist with this change.

被選擇的解決方法

Simon Walker said

Is this something that can be implemented? I have reasonable software development skills so would be willing to assist with this change.

You have to file a bug about this feature request here.

從原來的回覆中察看解決方案 1
引用

額外的系統細節

已安裝的外掛程式

  • Shockwave Flash 32.0 r0

應用程式

  • User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:68.0) Gecko/20100101 Firefox/68.0

更多資訊

TyDraniu
  • Top 25 Contributor
316 個解決方法 1785 個答案

選擇的解決方法

Simon Walker said

Is this something that can be implemented? I have reasonable software development skills so would be willing to assist with this change.

You have to file a bug about this feature request here.

''Simon Walker [[#question-1268539|said]]'' <blockquote> Is this something that can be implemented? I have reasonable software development skills so would be willing to assist with this change. </blockquote> You have to [https://bugzilla.mozilla.org/enter_bug.cgi?format=guided#h=dupes|DevTools| file a bug about this feature request here].
這篇文章有幫助嗎? 1
引用

提出問題者

Thanks TyDraniu, I'll do so

Thanks TyDraniu, I'll do so
這篇文章有幫助嗎?
引用
問個問題

如果您還沒有帳號,您必須先 登入您的帳號 來回覆文章。請 開始一個新問題