Safari has a wealth of special features designed for web developers, all gathered together under a hidden Develop menu. Depending on the version of Safari you're running, the Develop menu will display four or more groups of menu items, such as the option to change the User Agent, show additional features, such as the Web Inspector and Error Console, disable JavaScript, or disable Safari’s caches. Even if you’re not a developer, you may find some of these features useful.

• Web Developer Tool For Chrome
• Developer Tool For Firefox
• Sql Developer Tool For Sql Server

Using the Develop menu is easy enough, with each item in the menu pertaining to the currently loaded and frontmost Safari page or tab, and then to any subsequently loaded web pages. The exception is commands, such as Empty Caches, that have a global effect on Safari.

Safari for Developers. Safari is the best way to see the sites on iPhone, iPad, and Mac. Thanks to blazing-fast performance and industry-leading energy efficiency, hundreds of millions of users enjoy exploring the web with Safari. Web Tools is a new app from developer James Finley of Ergo which aims to create a Safari-style web inspector for iPad. I've tried other solutions for getting the source of web pages via iOS, but, at least on iPad, I haven't seen any come close to being as well designed and implemented for the iPad's bigger screen. Web Development Tools. Apple has brought its expertise in macOS and iOS development tools to the web. Safari includes Web Inspector, a powerful tool that makes it easy to modify, debug, and optimize a website for peak performance and compatibility on both platforms. Firefox Tools Adapter is a new browser add-on for Firefox that enables developers to connect browsers, at the current time Chrome for desktop and mobile as well as Safari on iOS, to Firefox's Developer Tools so that they can be used instead of the native tools provided. Develop Show Web Inspector. If you can't see the Develop menu, go to Safari Preferences Advanced, and check the Show Develop menu in menu bar checkbox. Safari's diverse dev toolset reflects the large developer community that utilizes a Mac for their design and programming needs. In addition to a powerful console and traditional logging and debugging features, an easy-to-use responsive design mode and a tool to create your own browser extensions are also provided.

Web Developer Tool For Chrome

Turn on the 'Develop' menu in Safari Preferences, then choose 'Show Web Inspector' from the 'Develop' menu. Click 'Resources'. Select the resource you want to inquire about and click 'Headers'.

Before you can use the Develop menu, you must first make this hidden menu visible. This is a fairly easy task, much easier than revealing the Debug menu, which prior to Safari 4 contained all of the commands that are now contained within the Develop menu. But don’t think that the older Debug menu is no longer relevant; it still exists and contains many useful tools.

Display the Develop Menu in Safari

1. Launch Safari, located at /Applications/Safari.

2. Open Safari's Preferences by selecting 'Safari, Preferences' from the menu.

3. Click the 'Advanced' tab.

4. Place a checkmark next to 'Show Develop menu in menu bar.'

The Develop menu will appear between the Bookmarks and Window menu items. The Develop menu is particularly handy for web developers, but casual users will also find it very useful.

Should you ever want to disable the Developer menu, simply remove the check mark in step four above.

Some of the Develop menu items that you're likely to find the most useful include:

• Open Page With: Lets you open the current web page in any browser you have installed on your Mac. If you've ever visited a website that doesn't seem to work correctly with Safari, you can use this command to quickly pop over to the same web page in another browser
• User Agent: The user agent is a string of text the browser sends to the web server hosting the web page. If you've ever visited a web page that proclaimed that Safari wasn't supported, this is how the site knew what browser you were using. In most cases, “not supported” is nonsense, and using this menu item you can change the user agent to mimic one from a different browser. You may be amazed how many times a web page that doesn’t work suddenly does, just by changing the user agent.
• Empty Caches: Safari keeps a cache of recently accessed sites. The data stored away in this cache includes all of the elements of a page, which can be used to quickly render a website when you return to the page. Sometimes the cache can be old or corrupt, causing a web page to display incorrectly. Emptying the cache can fix these issues, and can even help speed Safari up.

Most of the remaining menu items will probably be more useful to web developers, but if you're interested in how websites are constructed, then the following items may be of interest:

• Show Web Inspector: This will open the Web Inspector at the bottom of the current page. With the Web Inspector, you can examine the elements that went into creating the page.
• Show Page Source: This will allow you to see the HTML code of the current page.
• Show Page Resources: This opens the Resource Inspector sidebar in the Web Inspector, which provides an easy way to see what images, scripts, style sheets, and other elements are used on the current page.
• Start Timeline Recording: If you want to see how a web page loads and runs, try the Start Timeline Recording option. This will create a graph showing network activity, and how each site element is loaded and used. It makes for an interesting display, but remember to turn the feature off by selecting Stop Timeline Recording; otherwise, you'll be using your Mac's resources on non-productive tasks--that is, unless you're a web developer.
• Enter Responsive Design Mode: Another tool for web developers in the built-in simulator that allows you to preview how your web page will look at different screen resolutions or with different devices, such as the iPad or iPhone. Simply load the page you are interested in and select Enter Responsive Design Mode to preview the page. You can try the page rendering using various devices or select a screen resolution to use. When you're done, return to the Develop menu and select Exit Responsive Design Mode.

• Experimental Features: This menu item is not available in all versions of Safari and its content can change with each Safari update. But if your feeling brave, you can try a few of the features that may find their way into future versions of the Safari browser.

With the Develop menu now visible, take some time to try out the various menu items. You'll probably end up with a few favorites that you'll use often.

Web Tools is a new app from developer James Finley of Ergo which aims to create a Safari-style web inspector for iPad. I’ve tried other solutions for getting the source of web pages via iOS, but, at least on iPad, I haven’t seen any come close to being as well designed and implemented for the iPad’s bigger screen.

Web Tools is an extremely simple app, with no interface elements except an address bar and a browser window. The address bar contains back and forward buttons, a reload button, and an inspect button. Load up a webpage in the address bar and tap the inspect button to see the web inspector slide up from the bottom.

Developer Tool For Firefox

Web Tools has a very similar design to that of Safari’s web inspector for Mac. When you enable the inspector, it slides up to cover the bottom half of the web page (though you can easily drag to make it obscure more or less, depending on your preference). The inspector contains two panes, the first of which displays the HTML DOM tree for the web page. You can expand and collapse whichever elements you want to navigate through the DOM.

Selecting an element will display its details in the second pane of the inspector. Here you Can see the element’s attributes, any style rules applied to it, and the element’s computed style. While Web Tools does not (yet, at least) support live editing a site’s CSS (you can’t actually navigate through all of a site’s documents, just the main HTML page at this point) you are able to add and remove attributes to and from elements on the page. If you’re editing your own website, this is a great way to compare and contrast between multiple different style choices for various elements. Still, I would love to see the Style Rules section opened up to live editing of the actual CSS for selected elements.

Web Tools of course supports an extension, so anytime you wish to examine the code of a webpage that you’re visiting in Safari, simply open up the share menu and tap the Web Tools extension. You’ll be launched into Web Tools with the page already loaded and the source displayed. This makes viewing the source of webpages just as easy as it is in Safari for Mac, and I’ve been really enjoying having this in my iOS toolbox.

The last feature of Web Tools is very intriguing. The app includes a drag handle on the right side of the browser view which allows you to dynamically adjust the width of the displayed webpage. This feature is meant for testing responsive layouts of websites. Just drag back and forth to see a website layout in different ways based on the width of the page.

Web Tools is a modern iOS app, designed with the iPad in mind. As such, it supports iPad multitasking, which works amazingly on my iPad Pro. As I’ve been working on a redesign of my personal website (mostly as a personal exercise and to have a design playground), I’ve been writing the code in Coda for iOS and using its live preview feature to see changes as I go in Safari. Coda puts the webpage up on a localhost server for Safari to display, but as long as Coda is open, this server is available to any web browser. As such, I’ve been able to use Web Tools as a great way to view and edit the site’s responsive design while I’m working on the code. I just fire up Coda and Safari in Split View, start up the live preview, then open the localhost address in Web Tools via the Safari extension. Now Web Tools is running the live preview and each time I hit save in Coda, the page will reload in Web Tools (sometimes the automatic reload doesn’t work, but a manual reload of the Web Tools page gets it back on track).

Web Tools and Coda’s Live Preview (View full size)

Web Tools is an exciting new tool, and represents exactly the kind of app that developers trying to move their workflows to the iPad Pro need. This is only the 1.0, and the developer has many more features planned for Web Tools. The next one in the pipeline, according to the Web Tools website, is a JavaScript console for debugging and testing JavaScript code.

I think Web Tools 1.0 creates an excellent foundation, and even in its simplicity it is already proving very useful to my workflows. That said, an app with such powerful implications leaves much to be desired for the future. I can’t wait to see what comes next for Web Tools, but here are some features that I would love to see come to the app, some of which I already mentioned above:

• The ability to manipulate both the width and height of web pages, so as to satisfy media queries that only change the layout based on both of those parameters. Going further here, it would be great to have a list of common device dimensions so that you could choose, say, “iPhone 6 size” and see the website constrained to the proportions of an iPhone 6. Coupled with Coda’s live preview, this would be an amazing way to edit my site’s look for an iPhone (or other specific device) and see exactly what it will look like as I go.
• Live editing of a selected element’s CSS.
• Inspection of all accessible files on the site rather than just the main webpage that is open in the address bar.
• Sometimes the app gets a little bogged down when opening a big HTML file (it always catches up shortly, but still), so some speed and efficiency enhancements would be great as well.

Overall, I’m very excited about Web Tools and the enhancements that it is making to my iOS workflows. If you’re a web developer, or anyone who ever has reason or curiosity to look at the source of a webpage, I highly recommend checking out this app. It’s easily the best web inspection app that I’m aware of for iOS, and there are even greater things to come from it in the future.

Sql Developer Tool For Sql Server

Web Tools is available for iPad only on the App Store at an introductory price of $5.99.