google-chrome-devtools | 易学教程

Inspecting javascript on jsfiddle.net in Google Chrome

阅读更多关于 Inspecting javascript on jsfiddle.net in Google Chrome

问题 Is it possible to set breakpoints using the google chrome inspector on javascript code entered into jsfiddle.net? When I go to the script tab of the developer tools I see lots of scripts but I don't know where my script would be found or if it can be found in there at all. In the past I have just settled for some console.log action but I would love to set some breakpoints. (If not possible I am interested in other ways of inspecting javascript in this scenario.) 回答1: In the Developer Tools,

Can I get chrome-devtools to actually search all JS sources?

阅读更多关于 Can I get chrome-devtools to actually search all JS sources?

问题 I'm having trouble with searching through JS files in chrome dev-tools, in the past the search activated by Ctrl+shift+f always found what I wanted, but recently (I'm not sure exactly which update triggered this) I'm finding the search does not catch JS in inline script tags JS inside iframes. I've also found the callstack messed up when inline scripts were involved, but when I try to google for these issues, I just get the dev-tools doc pages, has anyone else noticed these issues? Was I just

Chrome Developer Tools: What is Snippets Support?

阅读更多关于 Chrome Developer Tools: What is Snippets Support?

问题 As of version 19, Chrome's Web Inspector has an experimental feature called "snippets support". Here is how to activate it: Open chrome:flags, enable "Developer Tools experiments", restart. Open Web Inspector (Developer Tools), hit the settings gear icon in the lower right corner, enable "Snippets support", restart. Open the Scripts panel, click the "navigator tree" icon on the left, and find an empty Snippets tab. My question is: What can I use this for? How can I populate this with snippets

JSON response format error - red dot\\bullet before response

阅读更多关于 JSON response format error - red dot\\bullet before response

I am sending an AJAX request expecting JSON response. However, the returned JSON is preceded with a red dot\bullet which is causing a parse error. Here is a screenshot from Postman : The dot is not shown on Raw or Preview display, only on Pretty . In Chrome Dev Tools Network tab it appears under Response . Preview is shown normally as if the dot isn't there. As mentioned in a comment before: In Chrome, red dots usually represent non-printable special unicode characters. Please check your server side code to prevent outputting those characters If your files are encoding with UTF-8, better to

Why does Chrome Dev Tool show a dates proto as Invalid Date?

阅读更多关于 Why does Chrome Dev Tool show a dates __proto__ as Invalid Date?

问题 I know __proto__ is deprecated (or not part of the standard) and all that but I'm still curious as to what it means when it says Invalid Date when I look at the __proto__ value of.. var myDate = new Date(1331869050000); 回答1: "I'm still curious as to what it means when it says Invalid Date" That's simply the toString value of the prototype object of the Date constructor function. Date.prototype.toString(); // "Invalid Date" You can override it if you like... Date.prototype.toString = function(

How does DevTools determine an object's constructor's name?

阅读更多关于 How does DevTools determine an object's constructor's name?

问题 I'm using Chrome v22.0.1229.94 m, not that it should matter, but just in case :-) Portability is of no concern to me. As long as it works with Chrome (and Safari) I'm happy. I have two functions, foo and bar: var foo = function() { ... } function bar() { ... } then if I create objects using them: f1 = new foo(); b1 = new bar(); I can get the constructor's name for bar, but nor for foo: > f1.constructor.name ==> "" > b1.constructor.name ==> "bar" yet in both cases DevTools console will show

How to inject javascript into Chrome DevTools itself

阅读更多关于 How to inject javascript into Chrome DevTools itself

Ok, so just the other day I learned that you can inspect the devtools if it is in its own window(explained here ). I also learned that you can style the devtools with your own css by editing the Custom.css file in your profile on your computer(more on that here ). What I want to do is not only add css, but also javascript, via a chrome extension. I am very aware of devtools pages , but those do not do what I want. Pretty much I want to get a content script to run on the devtools inspector itself. I found one extension that does exactly this, but for the life of me I have not been able to

How to inspect WebSocket frames in Chrome properly?

阅读更多关于 How to inspect WebSocket frames in Chrome properly?

问题 I've entered echo.websocket.org as it was suggested, opened Network tab and WS filter in Chrome Developer Tools, but I do not see any frames. I see connection entries, but Frames tab always stays empty. Is there anything special I should do to see the frames? Screenshot: 回答1: Did you send any data on the page? You need to try sending a message after clicking Connect : There is also a useful area in Chrome where you can view all your active sockets: You can access it at here: chrome://net

How can I view network requests (for debugging) in React Native?

阅读更多关于 How can I view network requests (for debugging) in React Native?

I'd like to view my network requests in React Native to help me debug - ideally in the 'Network' tab of Chrome's devtools. There are some closed issues about this on GitHub ( https://github.com/facebook/react-native/issues/4122 and https://github.com/facebook/react-native/issues/934 ) but I don't entirely understand them. It sounds like I need to undo some of React Native's polyfills and then run some commands with extra debugging flags, and maybe modify some Chrome security settings? And apparently there are some security issues involved in doing this that might make it a terrible idea, but

How to reload a file via require.js triggered from the browsers js console

阅读更多关于 How to reload a file via require.js triggered from the browsers js console

问题 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