But, without a good understanding of it, coupled with the fact that it’s treated like any other div in most browsers, the debugging process can be annoying. If you’ve ever built responsive and organized web page layouts, then you’ve most likely used Flexbox. The inactive properties are colored gray with an information icon describing why it’s not working and a tip to possibly solve it. The inactive CSS indicator in the rules panel warns you whether a CSS property has any effect on the element. Thankfully, with the help of the inactive CSS indicator, I can better understand issues with CSS. Inactive CSSĪs someone with not much front-end development experience, I spend a lot of time debugging CSS. In settings, you can change the targeted browsers. It also lists every occurrence of the property beneath it. When clicking on the property, you are sent to its Mozilla web documentation. To the right of each property is a list of icons representing the supported browsers. You can label each property as experimental or deprecated, too. The other list does the same but for the entire page. The Selected list shows the properties with compatibility issues applied to that element. The tab consists of two main parts, the Selected and All issues expandable lists. It provides the most up-to-date version of Firefox, Edge, and Chrome across their builds (current, beta, and nightly), as well as their IOS and Android versions. This is where the compatibility tab becomes helpful. One way to support a browser is by making sure the CSS properties used are compatible. When building a website, it’s standard for it to support more than one browser. Below it is an “All Fonts on Page” panel that lists all fonts used on the page. You can also change line height, weight, and italics. Then it should be beneath or to the right of the HTML pane, depending on how you have the inspector docked. To locate the fonts tab, inspect an element. So if you don’t like the size of a font, you can change it using a slider in real-time. The fonts tab gives you an accessible editor for any standard font on the page. In addition, the developer edition is one version ahead of Firefox, supporting experimental features and betas for the latest developer tools.īelow are some other features that sold me on switching to Firefox Developer Edition. This makes it easier to separate your developer profile from your personal profile.Ĭommon developer tools are set by default. Firefox Developer Edition exists as a separate profile from all other Firefox browsers. If you’re already using Firefox, switching to Firefox Developer Edition is easy. An Easy Switch to Firefox Developer Edition I think it would benefit front-end developers to check out some of its awesome features such as the fonts tab, compatibility tab, inactive CSS indicator, Flexbox inspector, and CSS grid inspector. Researching other browsers, I discovered Firefox Developer Edition. I noticed that while testing my work on other browsers, I only used Chrome for development. I recently found myself doing a lot of front-end work in my current project.
0 Comments
Leave a Reply. |