Therefore, we tend to spend the majority of our time in the Sources tab debugging JavaScript at runtime. Sencha applications are notoriously different from web apps built with other frameworks in that Sencha applications generally involve writing very little HTML. It’s also very helpful in building anything involving CSS 3D Transforms. The Layers panel can be incredibly helpful in understanding how your DOM elements are structured on the page, and therefore how CSS rules may apply to them. To access this feature, click on the three dots menu on the right/top side, then More tools then enable Layers option: However, Chrome DevTools has a feature that allows us to view the DOM layering in 3D. Layers PanelĪlthough most web developers conceptually understand how nesting DOM elements affects the way the browser layers CSS is applied to those elements, the fact remains that the browser displays a 2D plane. Chrome DevTools has what seems like 10,000 individual features, and we could literally spend days talking about them - so let’s jump right into three features I have found incredibly helpful. When I spoke about this topic at SenchaCon some time ago, I skipped what I considered to be the “basic” features of Chrome Developer Tools in order to spend more time talking about the advanced and hidden features. At that cadence, it becomes difficult to stay on top of new features or UI changes. Today, Google pushes a new version of Chrome every six weeks, and these updates often include changes to the Chrome Developer Tools. Chrome (at that time) extended WebKit and the built-in “WebKit Inspector” to include a variety of additional tools (like Profiles) - and soon thereafter surpassed the feature set of Firebug. Firebug (an extension for Firefox) was by far the most advanced tool available, and many of us relied on it.īut after Chrome was released, this picture quickly began to change. At that time, web developers didn’t have many options when it came to choosing even the most basic debugging tools - Internet Explorer did not offer any developer tools (in spite of holding the majority of the worldwide browser market share), and Safari and Firefox only offered limited tooling. Google Chrome was first released in 2008. View Examples, Videos, Webinars, Datasheets and Whitepapers LEARN MORE > Professionally maintained Web Framework for Java developers LEARN MORE > The low-code editor that accelerates building robust Sencha Ext JS enterprise applications with simple drag and drop LEARN MORE > High-Performance Enterprise-grade JavaScript?ramework with 140+ professionally maintained components LEARN MORE >
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |