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.
Related
When using the Sources panel of Chrome DevTools to step through code, sometimes you pause on code from Chrome Extensions.
There is a solution from documentation: Blackbox Chrome Extension Scripts
But even if I enable this parameter:
The code debugger still is pausing in content sctipts (chome extenstion js files)
How can I fix it?
You should provide a pattern.
You can do it simply clicking the right button on the code of the script you want to black and selecting "Black box script".
Let me know if it works.
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 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
I want to know ,how to debug javascript in asp.net?Can I apply break point to javascipt?
You could do following
Use debugger keyword with .Net IDE. In your javascript on your page.
something like this.
Use F12 Developer tool with IE browser.
Use FireBug with Firefox.
Use Control - Shift - J to open Developer Tools and bring focus to the Console. for Google Chrome.
If you are using Visual Studio along with Internet explorer, you can debug javascript by simply applying breakpoints. Or else if you want to debug your javascript file in fire fox or chrome browsers you can make use of tools like Firebug # http://getfirebug.com/
You can use firefox firebug or chrome tool.
for example:
you click in chrome examine the element and then in "Source" you select your script add breakpoints and debug it.
You can use Firefox but Firebug should be installed. Then, from Script tab, you should "Reload" to see all resources. After that, when you want to debug any line, put breakpoint to left side of code and when you reload the page debug will start and you can step into/ over / out, continue, rerun..
You can use Firebug tool in Mozilla browser it will notify all the error in your javascript, what java scripts are loaded, function call to javascripts are correct or not on run time.
I use Chrome Developer Tools to debug my JavaScript code, but I have one pet peeve with the way Chrome lets you edit the JavaScript files under the Scripts tab. Sometimes, I do not realize that I am in Chrome and I start making changes to the code under the Scripts tab, only to realize when I refresh that the changes I had just made were never saved to disk!
I was wondering if there is way to make the code shown in the Scripts tab read-only, so that if I try to edit the file in Chrome, I'll see that it's not editable and then realize that I'm not in my IDE.
Use the following process to make the script source read-only in Chrome 32+:
Go to the chrome://flags/#enable-devtools-experiments URL
Select Allow UI Themes
Open Chrome Dev Tools
Select Settings (Press F1 or click on the three dots on the far right)
Select Allow UI Themes
Create a DevTools theme with the following style:
.content-view.script > .text-editor { -webkit-user-modify: read-only !important; }
Publish it the the Chrome Web Store
Install the Theme
Restart Chrome
References
Custom.css has stopped working in 32.0.1700.76 m Google Chrome update
Sample DevTools Theme Extension
Chrome Developer Edition Dark Theme for Chrome Dev Tools
WebCore Inspector Script Content View
Chromium User Data Directory
Use the old process for Chrome 31-:
Use a user stylesheet to disable the script tab altogether:
.toolbar-item.scripts { display:none !important; } /* Hide Scripts Tab */
Or simply make the script source read-only:
.text-editor-editable { -webkit-user-modify: read-only !important; } /* Old selector */
.content-view.script > .text-editor { -webkit-user-modify: read-only !important; } /* Older selector */
.editing { -webkit-user-modify: read-only !important; } /* Generic Selector */
Here are several possible locations of the file:
Windows 7 Chromium:
%LOCALAPPDATA%\Chromium\User Data\Profile 1\User StyleSheets\Custom.css
Windows 7 Chrome:
%LOCALAPPDATA%\Google\Chrome\User Data\Default\User StyleSheets\Custom.css
OSX Chrome:
/Users/YourUsername/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css
Ubuntu Chrome:
~/.config/chromium/Default/User\ StyleSheets/Custom.css
Use the following Chrome Devtools URL to reference the relevant styles:
chrome-devtools://devtools/devTools.css
As far as I know, there is no option to disable script editing in the Chrome/WebKit Developer Tools.
Below are two three possible solutions:
Solution 1:
Make an extension that shows an alert every time you make an edit:
JavaScript:
chrome.devtools.inspectedWindow.onResourceContentCommitted.addListener(function(resource, content) {
alert("WARNING: Your changes will not be saved!!");
// Optional, but and extra layer of "protection", if you don't want/need it just remove the "experimental" permission from the manifest
if (chrome.experimental) {
chrome.experimental.devtools.console.addMessage("error", "WARNING: Your changes will not be saved!!");
// Shows in red
}
});
Extension (unpacked, first enable the experimental extension API's under chrome://flags): http://www.mediafire.com/?wb1r67ron0x6szh
Solution 2:
Modify the source and run a custom build:
The other option would be to modify the developer tools source, please see https://developers.google.com/chrome-developer-tools/docs/contributing for more details. If you did that, all you need to do is remove the text-editor-editable class from the editor container (line 1279, DefaultTextEditor.js).
Solution 3:
Make chrome auto-save your files:
The third option would be to enable chrome to save your files, there are a number of extensions that do this namely Tincr. Tincr also let's you live-reload your files and offers complete syntax highlighting.
My personal opinion is that this is the best solution.