I use AngularJS and the ngRoute to show multiple views in my app and the app has to work in IE8+ :(.
When I "inspect element" the ng-view in IE developer toolbar, the ngView contents it's not shown. (because it's dynamically generated?)
Is there a way to overcome this? (a setting in developer toolbar maybe).
IE actually has a refresh button that let's you refresh the HTML that has been inserted after developer tools window has been opened. It doesn't refresh the site, but the tools window content.
image source
Is it a requirement to use IE? If that's the case, you may find use of some snapshotting tech like https://npmjs.org/package/grunt-html-snapshots
I would suggest using a more advanced browser. Have Have a look at the Batarang plugin for Chrome which extends the Chrome Developer Tools, adding tools for debugging and profiling AngularJS applications.
https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk?hl=en
Related
Im currently working on a fork of the famous web developer extension (chrome, firefox, opera). Exactly I am working on the chrome extension.
The Firefox extension is shown like that:
Chrome instead shows only a icon...
..which toggles the "pretty small" widget:
A part of my goal with this fork is to change this toggle icon to a toolbar such as firefox does.
After studying the documentation chrome extensions (https://developer.chrome.com/extensions/devguide) I came to the result that this is not possible with default settings (browser actions, page actions,...).
When I looked again at the Table of Contents in the documentation I got an idea. There is the possibility to edit the bookmarks. So it could be possible to add an additional bookmark bar/row and place the single web developer actions as bookmark with the function on it.
Is this the right way for solving this? Because at the moment I only see possibilities with more or less dirty hacks. And doing it via bookmarks seems at least dirty.
PS: I also thought about this:
The plugin is actually the same on firefox and chrome and from the same author. So when this adaption of the toolbar in chrome would be easy possible then would not have such differences in the chrome and firefox addon.
Nope, that's simply impossible.
Chrome does not support custom toolbars, and that includes "an additional bookmark bar/row".
The closest, visually, would be injecting UI directly into the top of all pages. I don't think I need to explain why that is hacky.
I'm debugging my code in Chrome with Dev Tools.
I wonder if I can have JS loaded only when DevTools active in Chrome, and ignored otherwise. So that I could ship my code with debugging logic in production, without affecting application performance, for general users.
Something like
<!-- if dev tools working load /debuf.js-->
You can use the devtools-detect library: https://github.com/sindresorhus/devtools-detect
It can detect if the DevTools are active, but it is not 100% correct
Doesn't work if DevTools is undocked and will show false positive if you toggle any kind of sidebar.
Very simply, what is the equivalent in firefox to chromes "search" tab within the browser console? Specifically firefox developer edition.
Use Debugger -> Search scripts (Ctrl-P). There are multiple options in that dialog to search the current file, or all files. It searches HTML and CSS as well.
I am writing print CSS for my site. Now the problem is that Firebug or similar devtools don't work in the browser's print preview. So it's hard for me to detect the problem.
Does anyone have a suggestion how to debug CSS print layout?
The Chrome DevTools can do this by changing the Media CSS option in the Emulation menu.
Check this out: Suggestions for debugging print stylesheets?
On Firefox you must select the Display CSS by Media Type option with the Web Developer add-on and then Firebug will work. There's also an enhancement request for Firebug to support switching between different media types.
Check this out, too: How do you debug printable CSS?
Is there a way to view the jQuery (or Javascript) generated HTML - for example, see the jQuery-modified source of a page that uses a number of prepend()'s html()'s etc.?
Use Firebug to look at the current DOM, although it is an interpretation of the HTML.
You can inspect the page with firefox addon FireBug though:
(source: gnucitizen.org)
In addition to Firebug as the other answers suggest, you can also use the built-in Chrome developer tools:
To access the tools you can do it the same way as Firebug, just right click and select Inspect Element.
Download the Web Developer plug-in for FireFox. Then Right click on the page, the select Web Developer -> View Source -> View generated source