In the Developer Tools window within the Chrome Browser, there is a "Sources" tab which in the past, I have been able to set breakpoints and step through the Javascript. I am still able to do that for a web app that I wrote. However, when I try to do the same for some another web app, the javascript file does not appear on the Sources tab. Instead, I find it on the Application tab but I do not appear to have the ability to step through the breakpoints on that tab.
How does the Application tab differ from the Sources tab and how might I be able to debug the javascript file?
Related
We have a custom web application that gets used via normal desktop browser, including IE, Chrome, and Firefox. When troubleshooting javascript type issues with this application, we can use the F12 button to open the javascript developer console.
This web application is also referenced inside of SAP GUI via the HTML Viewer.
The trouble that we have is that clicking F12 does not open the javascript developer console for us. Does anyone know how we go about opening this javascript developer console for a web application within SAP GUI HTML Viewer?
If you're using newer versions of windows, you might want to give F12Chooser.exe a try. It's the same developer console you would get from hitting F12 on IE, but it gives you the ability to choose a target to debug.
You can find the exe at C:\Windows\SysWOW64\F12\F12Chooser.exe (change SysWOW64 by System32 if you're on a 32bit machine)
Now that Firebug is fading away, Firefox users are asked to switch over to the Firefox Developer Tools.
Therefore I am wondering, which features do the Firefox DevTools have that are not offered by the Chrome DevTools?
Can you please give me an objective answer to this question?
From the docs:
DOM Property Viewer
Inspect the page's DOM properties, functions, etc.
(You'll notice properties of the object are not usually listed in console in Chrome, you would never know that body.innerHTML existed, looking at "document.body" in the console.)
Developer Toolbar
A command-line interface for the developer tools.
Shader Editor
View and edit the vertex and fragment shaders used by WebGL.
Web Audio Editor
Examine the graph of audio nodes in an audio context, and modify their parameters.
Taking screenshots
Take a screenshot of the entire page or of a single element.
Some extra tools in the settings panel:
Measure a portion of the page
Scratchpad
The network panel shows the stack trace of the cause of each network request, in Chrome you have to go through console log of network requests and find the one and expand it. Also, you can see the actual preview (in preview tab) of a xhr response if it happens to be html returned.
And perhaps the most useful, the inspector shows (ev) beside every element with an event listener on it, with direct listing of everything that adds event listener to it. (nicer than Chrome's event tab listing to the right.)
Firefox DevTools
As far as I can see, the Firefox Developer Tools (as of Firefox 54.0.1) have a lot of niche features over the Chrome Developer Tools (as of Chrome 59.0), i.e. very specific tools that are presumably used by a rather small group of people. Besides those special tools, the Firefox Developer Tools also have several core features the Chrome Developer Tools are missing.
The different features are:
Canvas Editor
Web Audio Editor
Shader Editor
Developer Toolbar (GCLI) (will be removed)
Scratchpad
DOM Inspector
Page rulers
Screenshot tools
Font Inspector
Grid Inspector
Measure portions of the page
Firebug theme (got removed in Firefox 61)
Switch between iframes
Tools to debug the browser UI
Security info for individual network requests
Network caching comparison
Chrome DevTools
The Chrome DevTools (as of Chrome 59.0) have more features regarding the standard tools and they provide other niche tools.
Those features include:
DOM and XHR breakpoints
Event listeners panel
Properties panel
Security Inspector
Audits
Touch simulation and pixel density in device emulation
Live editing in Sources panel
Workspaces
Network request blocking
Advanced memory tooling
Manifest, service worker & application cache inspector
Scroll performance issues highlighter
Frames per second meter
CSS Media emulation
Global file search
Code coverage analyser
Geolocation, orientation, and touch emulation
Local overriding of CSS styles
Also, they differ in many smaller features and in their settings.
I am looking for a way to hide some folders or files, for example in the chrome inspect tool (F12) under the sources tab.
I am developing a web application with angularjs and i want to hide the app folder that contain some js files with sensible data.
I'm developing a chrome app. Whenever I restart the app to test new code (from context menu or chrome://extensions), the developer tools window closes and I have to re-open it manually (right click > inspect element). Previous behaviour was that the developer window would also automatically re-open during this process.
Right now I'm trying to actually debug code that runs on app load, and I can't get to any break points because by the time I can manually re-launch the developer tools they've been missed.
How can I have the developer window automatically re-open when the app is restarted?
No.
You can't programmatically open the Chrome DevTools.
What I suggest is to change onload to a function, and call that from the console.
This is a question about debugging a project, not about writing the code.
I am on the final stages of developing an HTML5 web app. Fairly last minute, our client tells us it should run on IE8. Since I use the HTML5-canvas in the app, this required the addition of Google Chrome Frame. Once installed and testing, however, IE8's developer console no longer prints any data, and the HTML viewer never loads. Is this a bug? Is there a way to fix it? It will really suck if I need to debug with alerts...
From Google Chrome Frame documentation:
You can use the Web Inspector in GCF just as you would in the Google Chrome browser. To use it, right-click and choose "Inspect Element". Logging is available via the console.log method, and you can set breakpoints and inspect network activity.