Close
  • Latest News
  • Artificial Intelligence
  • Video
  • Big Data and Analytics
  • Cloud
  • Networking
  • Cybersecurity
  • Applications
  • IT Management
  • Storage
  • Sponsored
  • Mobile
  • Small Business
  • Development
  • Database
  • Servers
  • Android
  • Apple
  • Innovation
  • Blogs
  • PC Hardware
  • Reviews
  • Search Engines
  • Virtualization
Read Down
Sign in
Close
Welcome!Log into your account
Forgot your password?
Read Down
Password recovery
Recover your password
Close
Search
Logo
Logo
  • Latest News
  • Artificial Intelligence
  • Video
  • Big Data and Analytics
  • Cloud
  • Networking
  • Cybersecurity
  • Applications
  • IT Management
  • Storage
  • Sponsored
  • Mobile
  • Small Business
  • Development
  • Database
  • Servers
  • Android
  • Apple
  • Innovation
  • Blogs
  • PC Hardware
  • Reviews
  • Search Engines
  • Virtualization
More
    Home Applications
    • Applications

    Windows 10 Launch Ushers in Improved F12 Web Developer Tools

    Written by

    Pedro Hernandez
    Published July 22, 2015
    Share
    Facebook
    Twitter
    Linkedin

      eWEEK content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.

      Microsoft Edge may have taken Internet Explorer’s place in Windows 10 as the new default Web browser, but its F12 tools live on.

      Edge, which officially launches alongside Windows 10 next week and is currently available in preview builds of the operating system, contains a new version of the F12 development tools that makes it easier to explore and manipulate Web code. F12 is so named because it springs into action when a user hits the F12 key.

      F12 is a collection of seven tools that enable developers to view HTML code, troubleshoot problems and monitor a Web application’s effect on a browser. They include an emulator that simulates various screen sizes and device types, a DOM (Document Object Model) Explorer, a debugger and a console for determining the status of code, along with performance, network and memory monitoring.

      One big behind-the-scenes change ahead of Edge’s impending release is how Microsoft is handling F12’s technical documentation going forward.

      Microsoft Edge Program Manager Ruben Rios said the company’s “F12 developer tools documentation is now part of the Microsoft Edge Dev site and fully available on GitHub,” in a July 21 announcement. “From this point on, the docs will not only be influenced by your feedback, but you’re invited to contribute and help shape our documentation going forward.”

      The new GitHub repository can be found here. “Over the coming months we will be working on adding new sections and content to enhance the documentation experience,” pledged Rios.

      The software maker also revamped F12’s debugger, making it easier for Web coders to spot and fix problems.

      Rios’ team streamlined the debugger’s CSS editing workflow, he said. “As a way to improve the usability and ease of styling your web pages, CSS files are exposed via the Debugger’s filer picker, allowing you to search and select any of the CSS files referenced on the HTML markup.”

      Now, the act of selecting a CSS file allows developers to edit it directly in the built-in text editor. Changes can be saved by clicking the save icon or using the familiar Ctrl+S shortcut, he noted.

      Cookies are less of a mystery with the new F12. “The Debugger now also provides detailed information about cookies that have been created by an HTTP header or via JavaScript,” said Rios.

      “The cookies view allows you see and modify existing cookies as well as create new ones,” he noted. “You can also clear individual cookies, session cookies or all cookies using the toolbar or the table’s context menu.” Similarly, developers can peer into the contents of local and session storage using the tool’s file picker.

      F12 in Microsoft Edge adds an eighth new tool called Experiments, a springboard of sorts for advanced functionality. “Our first experiment in the latest build allows you to edit any JavaScript file in the debugger source viewer,” Rios informed. Once enabled, users can edit, compare and save changes to their JavaScript code directly in the tool.

      Pedro Hernandez
      Pedro Hernandez
      Pedro Hernandez is a writer for eWEEK and the IT Business Edge Network, the network for technology professionals. Previously, he served as a managing editor for the Internet.com network of IT-related websites and as the Green IT curator for GigaOM Pro.

      Get the Free Newsletter!

      Subscribe to Daily Tech Insider for top news, trends & analysis

      Get the Free Newsletter!

      Subscribe to Daily Tech Insider for top news, trends & analysis

      MOST POPULAR ARTICLES

      Artificial Intelligence

      9 Best AI 3D Generators You Need...

      Sam Rinko - June 25, 2024 0
      AI 3D Generators are powerful tools for many different industries. Discover the best AI 3D Generators, and learn which is best for your specific use case.
      Read more
      Cloud

      RingCentral Expands Its Collaboration Platform

      Zeus Kerravala - November 22, 2023 0
      RingCentral adds AI-enabled contact center and hybrid event products to its suite of collaboration services.
      Read more
      Artificial Intelligence

      8 Best AI Data Analytics Software &...

      Aminu Abdullahi - January 18, 2024 0
      Learn the top AI data analytics software to use. Compare AI data analytics solutions & features to make the best choice for your business.
      Read more
      Latest News

      Zeus Kerravala on Networking: Multicloud, 5G, and...

      James Maguire - December 16, 2022 0
      I spoke with Zeus Kerravala, industry analyst at ZK Research, about the rapid changes in enterprise networking, as tech advances and digital transformation prompt...
      Read more
      Video

      Datadog President Amit Agarwal on Trends in...

      James Maguire - November 11, 2022 0
      I spoke with Amit Agarwal, President of Datadog, about infrastructure observability, from current trends to key challenges to the future of this rapidly growing...
      Read more
      Logo

      eWeek has the latest technology news and analysis, buying guides, and product reviews for IT professionals and technology buyers. The site’s focus is on innovative solutions and covering in-depth technical content. eWeek stays on the cutting edge of technology news and IT trends through interviews and expert analysis. Gain insight from top innovators and thought leaders in the fields of IT, business, enterprise software, startups, and more.

      Facebook
      Linkedin
      RSS
      Twitter
      Youtube

      Advertisers

      Advertise with TechnologyAdvice on eWeek and our other IT-focused platforms.

      Advertise with Us

      Menu

      • About eWeek
      • Subscribe to our Newsletter
      • Latest News

      Our Brands

      • Privacy Policy
      • Terms
      • About
      • Contact
      • Advertise
      • Sitemap
      • California – Do Not Sell My Information

      Property of TechnologyAdvice.
      © 2024 TechnologyAdvice. All Rights Reserved

      Advertiser Disclosure: Some of the products that appear on this site are from companies from which TechnologyAdvice receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. TechnologyAdvice does not include all companies or all types of products available in the marketplace.

      ×