FAQ Database Discussion Community


AngularJS: How do I force Chrome's Dev Console to show me which instruction caused the error?

google-chrome-devtools
I very often get error from angular.js, googleapi etc. like "undefined is not a function". The problem is that I can't figure out how to find the instruction (written by me) who caused the error. Normally I can use the debugger but there is a huge stack of calls and...

Debug LESS with Chrome Developer Tools

node.js,less,google-chrome-devtools
My directory structure is as follows: css/style.css style.css.map less/style.less index.html I have created a simple index.html file as follows: <head> <link type="text/css" rel="stylesheet" media="all" href="css/style.css"> </head> <body> <div id='box'></div> </body> The style.less as follows: @bgcolor: green; #box { width: 200px; height:200px; background: @bgcolor; } Inside the css folder is the...

Why doesn't Chrome's console display the function code anymore?

javascript,google-chrome,google-chrome-devtools
In the past, if I had a function test with the content function test () { return true; } and I typed test into console, then I'd get back: function () { return true; } Now however, it just returns function test() without the actual function code. How do I...

Why does Chrome debugger think closed local variable is undefined?

javascript,google-chrome,google-chrome-devtools
With this code: function baz() { var x = "foo"; function bar() { debugger; }; bar(); } baz(); I get this unexpected result: When I change the code: function baz() { var x = "foo"; function bar() { x; debugger; }; bar(); } I get the expected result: Also, if...

detect requests calls in a url similar to network in chrome dev tools

javascript,google-chrome,google-chrome-extension,google-chrome-devtools
I don't know if what I am looking for is possible, I want JS, or any other programming method solution to detect the requests calls for a given url page, something similar to chrome dev tools There is a site that displays videos, I would like to access through the...

Momentjs start of day off by 4 minutes?

javascript,google-chrome,google-chrome-devtools,momentjs
this is exactly what i am putting into the chrome console: moment().startOf("day").format('MM/DD/YYYY HH:MM:ss') "04/27/2015 00:04:00" why could this be happening??...

Chrome developer sidebar in extension pane

google-chrome,google-chrome-extension,google-chrome-devtools
I am making a developer extension for Chrome. I create a custom pane, and want to add a sidebar to that pane. This page includes documentation on how to create a sidebar in the Elements pane and the Sources pane. However, it does not include any createSidebarPane method under the...

Chrome Dev Tools console - select frame programatically

javascript,google-chrome,iframe,console,google-chrome-devtools
Using the Chrome Dev Tools console, I'm trying to select an element inside an iframe on the page. Is there a way to do this programatically without having to select the frame in the frames dropdown in order to set the console context to that frame first? Assuming the target...

Is Object.prototype an object and is prototype somehow not?

javascript,google-chrome-devtools
When I type Object.prototype into the Chrome console it displays Object{} If I assign it to a variable var proto = Object.prototype it displays Object{} But if I check for it's prototype var proto = Object.prototype proto.prototype; If proto is an Object{} and proto.prototype is undefined does that means thatObject()...

How can I simulate the back button on a samsung device using chrome?

android,mobile,google-chrome-devtools
I am using chrome devtools to debug a site running on an android device. In an android device you usually have the "menu" button and the "back" button. How can I emulate a key press to one of these keys using chrome devtools?

View a Javascript method's contents in Chrome console

javascript,google-chrome,debugging,google-chrome-devtools,console.log
When I console.log an object in Chrome, I see all properties and a method name, but I can't see the contents of the method itself. How can I view the contents of an object's method? I've created a JSFiddle that may help explain what I'm looking for. ...

Google chrome developer tool, how to pick color from any website I visted

html,google-chrome,google-chrome-devtools,color-picker
When I visit websites I want to save interesting colors I found on them. How can I use chrome developer tool to pick color code from the page I am currently seeing? NB: I dont want to use third party plugins like chrome extension plugins....

why don't I see any network call in Chrome's DevTools (or any other tool such as Charles)

google-chrome-devtools,fiddler,charles
while yahoo finance updates stock price on an already open page such as http://finance.yahoo.com/q?s=AMRC Thanks in advance! Jack M...

Chrome - open dev tools in new window

google-chrome,google-chrome-devtools
in chrome 43.0.2357.81 I can't find the little box which can separate devtools into a new window I tried googling q=open+inspect+element+in+new+window+chrome nothing new Here is the Screen shot ! ...

Sending javascript code to a chrome app via the remote debug protocol

google-chrome,google-chrome-extension,google-chrome-devtools,remote-debugging,chromium
In the context of a unit test I need to send some code to the console of a chrome app I am developing. It's clear that I can do that from the chrome.debug API, but is there a way to do that from outside the browser?

Is HTML5 drag and drop compatible with Chrome Apps (packaged)?

html5,google-chrome,google-chrome-devtools,google-chrome-app
I've tried the traditional methods and it works as a webpage in Chrome, but not when I'm using the page as a packaged app. I'm just doing this example from W3 for testing purposes since it's very simple. http://www.w3schools.com/html/html5_draganddrop.asp...

Is there a way to view chrome.storage.local in Developer Tools?

google-chrome,google-chrome-extension,google-chrome-devtools
I have a Chrome Extension and I'm able to view background page localStorage on the Resources tab of Developer Tools. Is there a way to do the some for chrome.storage.local?...

Why do downloaded KB different in Firefox DevTools vs. Firebug or Chrome DevTools?

firebug,google-chrome-devtools,firefox-developer-tools
Can anyone explain me why, debugging on any page, I see always a great difference between the Firefox DevTools, Firebug and the Chrome DevTools in terms of transferred file sizes? For example, with the homepage of Stack Overflow I see: Chrome DevTools: 282 KB Firebug: 246 KB Firefox DevTools: 873...

update popup.html content dynamically

javascript,google-chrome-extension,popup,google-chrome-devtools
I am sending a message from the contentscript to popup and trying to show the received message when the extension is clicked. I can see that the message is being received only when I Inspect popup contentscript.js console.log("content script"); chrome.runtime.sendMessage("hello",function(response) { console.log("sending message"); }); popup.js console.log("popup script"); function onReq(request, sender,...

Is new line a separator in Javascript

javascript,google-chrome,knockout.js,google-chrome-devtools,knockout-2.0
While debugging a web SPA issue, I stumbled on something to which I could not find concrete references online: missing comma separator between function expressions in javascript. Here's the details: This works - explicit comma as a separator is there (note - intentionally on one line): var f1 = function()...

Chrome Inspect Element is not showing all Javascript

javascript,google-chrome,google-chrome-devtools
The current project I am working on builds a page's javascript code based on some conditions. All the code works but when I go to inspect element to see it, it is not showing. Or more like it is truncated and 3 dots added at the end. It seems to...

How to monitor and/or throttle rate limit cpu/bandwidth by client-side web pages?

javascript,html5,google-chrome-devtools,cpu-usage,bandwidth-throttling
Nowadays it appears that many webpages want to use my cpu/harddrive/bandwidth in order to show me their ads/pages/information in beautiful but expensive ways. Often I like these new pages, but sometimes I'm a curmudgeon and am just annoyed that my fan starts spinning and the EMF loads rise when I...

How to show the path of a style sheet in google chrome's developer tools?

css,google-chrome,path,google-chrome-devtools
In firebug if I mouseover a style sheet I can see all the path leading to the file, but in chrome it only shows the first 40 characters and ... Is there a way to get the full path? Thanks in advance....

Chrome developer tools: is there a way to show what calls the function?

javascript,google-chrome,google-chrome-devtools
Just as in the topic: is there a way to show what calls the function that I want to inspect? I have an issue, where my function is called twice, and I dont know what calls it for the second time... Thanks, uksz...

Shortcut key to go to last opened panel (dev panel) in Chrome

google-chrome,google-chrome-extension,keyboard-shortcuts,google-chrome-devtools
Is there a shortcut key to switch between the Chrome dev panels while you are working there like the ALT+TAB functionality for Windows? If not, then is it possible to configure it or write a plugin for this purpose? Also, I know that we have this shortcut key Ctrl+[ and...

Is there a keyboard shortcut in Chrome Dev Tools to indent a block of code?

google-chrome-devtools
Is there a keyboard shortcut in Chrome Dev Tools to indent a block of code? I'm used to using Command + ] in Coda 2, but that only switches panes in Chrome Dev Tools....

Why Chrome shows \ufeff symbol and gray lines in TypeScript?

javascript,visual-studio,google-chrome,typescript,google-chrome-devtools
When I open my TypeScript in Chrome debugger I see strange red dot at the first line. I believe it corresponds to unrendered symbol \ufeff (as popover says). There is no such symbol in the TS file when I open it in editor (e. g., Notepad++ with "show all...

CSS :before content value changing until cache is cleared

html,css,css3,google-chrome,google-chrome-devtools
I have a ul list with chevron bullet points effected by the following css code: ul li::before { content : "»"; padding-right: 0.3em; } This displays correctly initially; however after a while the bullet points change to ». This is fixed (for a while) by clearing the cache, but the...

Slow rasterization in Dev Tools

javascript,performance,google-chrome-devtools,frontend
I'm optimising a site with some fairly simple parallax scrolling. The animated elements are on separate layers (backface-visibility:hidden) and the scripting and rendering steps seem fairly quick. However I'm seeing a lot of time spent on painting: The actual drawing is fine but those huge hollow green bars represent rasterization...

chrome devtools sidebar pane, set multi titled object

google-chrome,google-chrome-devtools
During developing chrome extension faced difficulties with creating multi title sidebar pane. According to the manual setObject set object as side bar content, but only with single title: sidebar.setObject({ some: 'qwe' }, 'title'); and result is following: but my target is to set object to meet following: I'v tried to...

How to beautify respond body of XHR (Ajax call) in Chrome browser?

ajax,google-chrome,google-chrome-extension,xmlhttprequest,google-chrome-devtools
As can be seen in the screencast below, the respond body is a minified JSON object.. Does anyone have ideas about how to beautify it in Google Chrome Browser? ...

Visualise CSS selectors like :read-only in debug (F12 tools)

css,google-chrome,debugging,google-chrome-devtools
Having :read-only, [readonly] { background-color: aliceblue; } <form> <h2>test</h2> </form> How can I detect, when debugging, say, in Chrome, that the h2(or form) field has an :read-only property (or other type of selector, like :disabled, etc.) set to true? PS. To clarify the question: the question is not about a...

What’s the quickest, easiest way to execute a JavaScript file on a live web page?

javascript,console,google-chrome-devtools,firefox-developer-tools
I have this JavaScript file URL: https://rawgit.com/Khan/tota11y/master/build/tota11y.min.js (hosted on GitHub and passed through RawGit), and I would like to inject it into a live web page via the browser’s console. In order to achieve that, I can dynamically create a <script> element and append it to the DOM: (function ()...

Why does my table cell (occasionally) not exhibit 'hover' behaviour until I force element state using Chrome Developer Tools?

html,css,google-chrome-devtools
I have a table, making use of the following CSS and HTML: .price { position:relative; display:block; text-align:center; } .detail { background: none repeat scroll 0 0 #EEEEEE; color: #333333; min-width:200px; width:auto; height: 0; overflow:hidden; left: 0; position: absolute; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease;...

I can't write object literal notation in Dev Console? [duplicate]

javascript,google-chrome-devtools
This question already has an answer here: JavaScript object literals syntax error 2 answers I get error when i write this: {a:1, b:2} but not when i just write this {a:1} I've tried in Firefox and chrome both give errors. There is no error if i Assign it to...

How to add multiple css rules at once through Dev-Tools or Firebug

css,firebug,google-chrome-devtools
I have 300 lines of CSS, consisting of many rules that I need to test on a page. I would preferably like to paste the rules in one go at the bottom of the main.css that the page is using - or add a pseudo "extra-main.css" sheet to the page...

Chrome Extension - How to execute a JS script on page load

javascript,google-chrome,google-chrome-extension,google-chrome-devtools
The following is that I'm trying to achieve Every time 'www.google.com' loads, a script/function triggers. However, the functions itself reloads the page via 'location.reload();' Basically, an infinite loop of reloads. Script reloads page -> Script injected -> Script reloads page -> etc. I want the tab @ google.com to keep...

chrome.pageAction.show only works with timeout

google-chrome-extension,timeout,google-chrome-devtools
I'm writing a chrome extension that is supposed to show a page action icon whenever a PDF is loaded. To this end, I'm checking the content type, and if it equals application/pdf, I chrome.pageAction.show(tabId). To my surprise, however, this chrome.webRequest.onHeadersReceived.addListener( function(details) { if (details.tabId >= 0) { var header =...

How to load saved .cpuprofile file in Chrome developer tools CPU profile?

google-chrome-devtools
There's a save button in the Chrome dev tools profiler, but no load button. How do you load a saved profile back into Chrome to view it?

How to get last executed JS functions

javascript,google-chrome-devtools
I'm working on a large and old project that run tons to JavaScript and sometimes when solving a bug its a bit hard to know which function has executed. Is there a way to get a list of the last executed functions in Chrome Developer Tools?...

Is there any way to view user-defined functions in Chrome DevTools?

javascript,google-chrome,google-chrome-devtools
Firebug's DOM panel has the ability to display user-defined object methods by checking the Show User-defined Functions option. I've been searching but can't seem to find a similar option within the Chrome DevTools. Is there a way to toggle the visibility of user-defined functions within the Chrome DevTools?...

Disable variable value information in chrome debugger

google-chrome-devtools
I don't know where or what key combination could make to enable variable value viewer inside the file viewer. How to disable ? (I dont see the way...?)...

Element centered in Google Chrome but not in Mozilla Firefox

html5,css3,firefox,google-chrome-devtools,flexbox
I am trying to simple login page for a personal project, an issue tracking application. Here is the HTML code for the login page- <!Doctype html> <html> <head> <title>All Issues</title> <meta http-equiv="content-type" charset="utf-8" content="text/html"/> <link rel="stylesheet" href="css/main.css" type="text/css" /> <link rel="shortcut icon" type="image/png" href="img/favicon.png" /> </head> <body> <header> <h1>All Issues</h1>...

How to close a fancybox element in Google Chrome developer tools?

javascript,google-chrome,google-chrome-devtools
I would like to close a popup content in some web pages via Chrome developer console. For example: When I open http://www.cw.com.tw for the first time, it will show a fancybox-content element. So I will have to click the "close button" of the advertisement in order to read to article....

Chrome Timeline buffer usage

javascript,performance,google-chrome,optimization,google-chrome-devtools
I'm trying to optimize the animations of а sitе. I'm using Chrome dev tools(network/timeline/profile) to get some stats and have found out that when I track the timeline, the usage always buffers to 100% in very short time. I make a test on stackoverflow and the buffer usage doesn't behave...

What determines the width of a div class when it's not defined?

html,css,google-chrome-devtools,column-width
I am trying to resize the sidebar column in this example. It's currently at 25% (column .3u). I would like to expand it to an equivalent of 26% without shrinking the actual main area (column .9u). The only way I see to accomplish is to increase the width of the...

Console.log() and settimeout(fn, 0)

javascript,asynchronous,google-chrome-devtools
I have a few questions about the following code that I ran in Chrome's console (I highlighted the difference between each loop). The intent of the code is to print out even numbers immediately, and then print out the odd numbers in order (because the stack is clear, and Chrome...

Debug responsive design

css,responsive-design,google-chrome-devtools
How do I debug reponsive design problems? How reliable is Chrome devTools for testing if everything is fine? I use devTools all the time, but now... I am not sure anymore how good it actually is, since I don't have real devices for testing and comparing. For example, for front...

Chrome DevTools Converts All HEX Colors to RGB: how to stop?

css,google-chrome,colors,google-chrome-devtools
Recently, Chrome DevTools has begun converting all elements' HEX colors to their RGB values, regardless of whether that HEX color is set in CSS or through the DevTools itself. I am aware of the shift+click method of converting colors to other formats, but I find this inconvenient. I am wondering...

Chrome Developer Tools shows favicon 404 error in Brackets LivePreview

google-chrome,debugging,google-chrome-devtools,developer-tools,adobe-brackets
I've just started doing Anthony Alicea's "Javascript: Understanding the Weird Parts" course, and he's using the live preview feature of Brackets to demo his code. The first module is a barebones HTML page with a script tag linking to an empty JS file. When I open this page in Brackets...

DOM nodes not garbage collected

javascript,memory-leaks,garbage-collection,google-chrome-devtools
I have a question about using Chrome's developer tools to debug memory leaks in a single-page web application. According to Google's documentation, after taking a heap snapshot you'll see red and yellow detached DOM nodes. The yellow nodes are those still being reference by JavaScript, and effectively represent the cause...

Chrome Dev Tools export Elements HTML

html,google-chrome-devtools,chromium-embedded
To debug my chromium-embedded application I am looking for a function to get the source code of the web page from withing the chrome developer tools. I basically want the HTML tree shown in the 'Elements' tab, the actual HTML DOM, as HTML text. Does this functionality exist? How can...

Chrome F8/hotkey debugger breaking during a drag and drop operation

google-chrome,debugging,drag-and-drop,google-chrome-devtools
In Chrome's web-developer tools one can break at any point by pressing F8. Often times I would like to break and inspect an element during a drag and drop operation by pressing F8. This won't work however. Is there a native Chrome-way shortcut without running a custom script?...

Can't find out how button click event got wired

debugging,firebug,google-chrome-devtools
I have a button which posts back through Ajax. I tried to find out what code executes when the button is clicked. I used Visual Event (screen capture below) to see how the event was bound but the info didn't help me enough. Then I set an event listener breakpoint...

Inspecting the value of a JS variable in Chrom console

javascript,jquery,google-chrome-devtools
This is fragment of a JS plugin that I'm using on my site. I'd like to inspect the value of isTouchDevice directly in the console. Just typing isTouchDevice reurns an 'undefined' error. (function($) { "use strict"; $.maxmegamenu = function(menu, options) { var plugin = this; var $menu = $(menu); plugin.settings...

Chrome debugger skips inline JavaScript code on first click

javascript,google-chrome,google-chrome-devtools,inline-code
When using the Mouse click option under the sources of the Event Listener Breakpoints option on the right, the debugger skips the following function code: <html> <head> <script type="text/javascript"> function test() { return true; } </script> </head> <body> <input type="button" onclick="return test();" value="test"> </body> </html> The problem is not that...

Core 1.5.1 Throws Warning on IE Input type email check after updating to latest chrome

mootools,google-chrome-devtools
Since upgrading to Chrome 41.0.2272.89 m, Mootools Core 1.5.1 is throwing a warning. Nothing major, but if you are as retentive as I am, it may irk you a little. var input = document.createElement('input'), volatileInputValue, html5InputSupport; // #2178 input.value = 't'; input.type = 'submit'; volatileInputValue = input.value != 't'; //...

how to break on error in Javascript

javascript,google-chrome,safari,google-chrome-devtools,safari-web-inspector
Is there a simple way to set a breakpoint one line before an error in the native browser debuggers such as Chrome and Safari? If not, what tools are there that will accomplish this task?

how to monitor the network on node.js similar to chrome/firefox developer tools?

javascript,node.js,https,google-chrome-devtools
When developing client side javascript applications, the developer network panel is invaluable for debugging network issues: How does a developer creating a NodeJS application monitor the network traffic from the nodejs application to a http/https server? For example how to debug the following network traffic? var http = require('http'); var...

Inline style element appers in develoer window but not when viewing source code

javascript,html,css,google-chrome-devtools,developer-tools
I am looking at a form that has a captcha. The CSS being applied has made it all whacky looking. I'm about to diagnose the issue, and I'm looking at the styles being applied in my Google chrome developer window. For each individual rule, there is light grey text in...

Test Chrome-only APIs

google-chrome-extension,google-chrome-devtools
I'm new to Chrome extension development and I'm trying to debug the chrome.notifications API. Alas, when I try to use the console to test the API, I get the error that: > chrome.notifications undefined I guess I need to test chrome.notifications in the context of an extension. Is there a...

Getting URL of HTML 5 video

html,html5,flash,google-chrome-devtools
I'm trying to the get the URL of this HTML 5 video but I can't seem to find it. I looked in Chrome dev tools but couldn't find anything. It's not even possible to right-click and view source on the video. I had to do it on another part of...

How to search for a DOM element in the Elements panel & highlight it in web page in Chrome dev tools?

google-chrome-devtools
I am using the latest Chrome & Canary. If I search for a DOM element in the search box in the drawer in dev tools and double click on a result, Chrome switches to the Sources panel and I can't highlight the element in the browser from there. How do...

How to access the DevTools API without actually opening the DevTools window?

google-chrome-extension,google-chrome-devtools
The documentation says "An instance of the extension's DevTools page is created each time a DevTools window opens. The DevTools page exists for the lifetime of the DevTools window." However, the Facebook Pixel Helper manages to to get network information without the devtools window being open. So, I was wondering...

Why does console.log output modified values even before they have been modified? [duplicate]

javascript,google-chrome,google-chrome-devtools
This question already has an answer here: console.log object at current state 7 answers In Chrome 39 developer tools, this code: var something = [ {x: 'foo'}, {x: 'foo'} ]; console.log(something); something.forEach(function (element) { element['x'] = 'baz'; }); ... outputs: Why does console.log output modified values even before they...

Chrome devtools reporting the same CSS on the same line twice

css,google-chrome-devtools
Chrome DevTools is reporting the same CSS on the same line twice. Is anyone else seeing this? How can I fix it? The problem occurs in both stable (40) and Canary (42) style.css is being loaded exactly once. It is not minified. ...

Why can't I view __proto__ upon object creation?

javascript,object,google-chrome-devtools,prototype-chain
When I create a blank object: var o = {}; Why can't I view the '__proto __' object when I create a new object, but I can when I add a function? Edit: For completeness, to create a truly blank object (no prototypal linkage), we could do: var o =...

Get CSS class definition from chrome developer tools console

javascript,css,google-chrome-devtools
I would like to programatically retrieve a set of CSS class definitions from chrome developer tools. In effect similar to what is displayed in styles tab in the right hand side. The input needs to be a class name and the output should be all the styles defined in it....

jQuery delegated mouseenter event only fires on click

javascript,jquery,google-chrome,google-chrome-devtools
I'm trying to wire up the jQuery mouseenter event to a bunch of links in a container. I also want to cancel navigation of the link so I'm wiring up the click event. All of the sudden the mouseenter handler is only executing after clicking the link. It is still...

Chrome Dev Tools claim that styles overrides themselves

css,google-chrome,google-chrome-devtools,development-environment
How should I understand following entries in Chrome Dev Tools: Styles overrides... themselves (same file, same line, same style)?...

Saving Custom Stylesheets for Any Website

css,google-chrome,customization,stylesheet,google-chrome-devtools
I know how to live-edit and save stylesheets for my own sites that I am developing locally. But wouldn't it be nice to be able to save your own custom styles for any website on the web? For example, I use a very cool, free chat system called tawk.to but...

What's the best way To edit CSS and JS of Html Template [closed]

javascript,css,html5,google-chrome,google-chrome-devtools
I have a HTML5 Template in my Local Computer. I want to edit this template CSS and JS to use in my project. I use this solution to edit Template Open Web site With Google Chrome also Open with Notepad++ Edit CSS file with Notepad++ and Refresh page in Google...

Why does the __proto__ object evaluate to “Object” in the debugger?

javascript,debugging,prototype,google-chrome-devtools,prototypal-inheritance
I'm reading Kyle Simpson's "YDKJS: this & Object Prototypes", and looking at his example of behavior delegation. Here's the code below: Foo = { init: function(who) { this.me = who; }, identify: function() { return "I am " + this.me; } }; Bar = Object.create( Foo ); Bar.speak = function()...