google-chrome-devtools

Having a text file (underscore templates) loaded by require.js on initial app start: define(['text!templates/template.html'], function(Template){ ... }; When i am now making changes to this file and want require to reload that single file without me having to reload the whole page and restart the whole app, is this possible? I'd like to trigger this from the javascript console in the browser. Use case is a scenario with underscore templates loaded via require.js, when making changes to one of those template files i could easily "inject" the new file to the running app, trigger the views render

This question already has an answer here: How to inspect WebSocket frames in Chrome properly? 2 answers I'm trying to inspect websocket traffic using Chrome Developer Tools. From my research it seems you should be able to see it using the network tab - and it even has a filter for 'ws'. However I've been inspecting sites that I know are using websockets and can't find a way to inspect the messages being sent back and forth. Using Chrome v56, also tried Safari with no luck... Does anyone know how this can be achieved? Joel Duckworth You need to reload the page with the network tab open and

General Questions Hello! I'm delving into the world of Chrome Extensions and am having some problems getting the overall workflow down. It seems that Google has recently switched to heavily advocating Event Pages instead of keeping everything in background.js and background.html. I take part of this to mean that we should pass off most of your extension logic to a content script. In Google's Event Page primer , they have the content script listed in the manifest.json file. But in their event page example extension, it is brought in via this code block in background.js: chrome.tabs

Is there a way to source-map styles so that edits made in Chrome Dev Tools can be persisted to a added local Workspace? Chrome Dev Tools is showing all my styles in styles.scss in a <style>...</style> tag in the element inspector. I've setup Chrome Dev Tools workspaces similar to how @vt5491 did it in their SO here: https://stackoverflow.com/a/37627935/1762493 and that is working for the .ts files I believe but element styles don't link back to source maps in the element inspect as they've been built with ng serve into index.html 's <style> element it seems. I'm running ng serve -dev -p=8081

There is a page on my website that uses jquery AJAX to request JSON data from the PHP backend. I want to view the JSON returned to the browser, and is trying to do so using Chrome browser's Developer tools, under Network> Response . Problem: Although I am able to view the JSON data by selecting the XHR item there, the response appears to be cut off midway. According to Chrome, this JSON response is 300-400KB in size. I wonder whether if the webpage is receiving the full JSON response without truncation, and if not, how can I view the full data being received? Have you tried the "preview" tab -

Is there a way to disable inspect element, right click and F12 in google chrome? This is definitely not possible to do from a web page. Even if you disable right click and disable the default behaviors for F12 , Ctrl+Shift+I , and Ctrl+Shift+J , there is no way to stop a user from opening Dev Tools on a different page and navigating to your page with Dev Tools already open. Also, you can access Dev Tools by going to Menu > Tools > Developer tools , which cannot be prevented by any website. 来源： https://stackoverflow.com/questions/20659943/disabling-inspect-element-right-click-and-f12-in-google

How can I programmatically get memory usage (JS and total) of my website in Google Chrome? I looked at doing it from a Chrome extension using the undocumented HeapProfiler (see here ), but I can't find a way to get data from that. I want to measure the memory consumption it at every release, so this needs to be programmatic. EDIT: I figured out how to get the HeapProfiler method to work. Each addHeapSnapshotChunk event has a chunk of a JSON object. chrome.browserAction.onClicked.addListener(function(tab) { var heapData, debugId = {tabId:tab.id}; chrome.debugger.attach(debugId, '1.0', function(

I created a fiddle with the following code: var x=10; When I try to view this in the console, I get the following: > x ReferenceError: x is not defined Makes sense, as it takes Javascript to run the console. Is there a way to get this working? If you use Chrome or Chromium, looks at the bottom of your developer console, where the string <top frame> appears. Click on it and select result(fiddle.jshell.net) . This will change the current scope of the browser and you can access to all the global variables. Also, remember to change the loading option in jsFiddle to no wrap if you want to access

I'd like to be able to debug an Angular2 application with Visual Studio Code. Here's my environment: OS : Ubuntu 16.10 x64 Browser : Chromium 53.0.2785.143 Node : 6.8.0 Angular-cli : 1.0.0-beta.19-3 Creating a new project with angular-cli : ng new test-VSC-debug cd test-VSC-debug Then I open VSC and load the project : File/open folder I click on the debug logo and I configure launch.json by selecting chrome . It generates the following file : { "version": "0.2.0", "configurations": [ { "name": "Launch Chrome against localhost, with sourcemaps", "type": "chrome", "request": "launch", "url":

My Google Chrome developer tools are disabled. I'm not sure how it happened. I was using them in the morning then went to use them in the afternoon and the F12 button wouldn't do anything. Same with ctrl+shift+i. If I navigate the 'Tools' menu, I can see the 'developer tools' link, but it is grayed out and disabled. Does anyone have any idea how to re-enable them? I uninstalled/re-installed chrome twice but no help. Delete the DeveloperToolsDisabled registry key in Software\Policies\Chromium\DeveloperToolsDisabled http://www.chromium.org/administrators/policy-list-3#DeveloperToolsDisabled I