developer-tools

Safari Developer Tools: Preserve Network Log on Navigation

巧了我就是萌 提交于 2019-11-27 14:54:41
问题 When using Safari Web Inspector to view the Network Log, the log is reset upon navigation, i.e. navigating to a different page clears the log. In the Chrome Developer Tools, I can easily persist the network log by checking the "Preserve log" checkbox in the Network tab. In Firefox Developer Tools, I can preserve the network log by checking "Enable persistent logs" in the developer tools preferences. With this persistence enabled, the network log remains intact until I manually clear the

Inject CSS with chrome developer tool?

大憨熊 提交于 2019-11-27 13:39:34
问题 Where can I add CSS to the page I'm viewing? I don't want to add style to one element directly, I want to add a 'document' to a page to debug changes before editing the site's style.css. Note, there are lots of questions here about 'injecting CSS from a chrome extension', but specifically I want to do it via the 'Chrome Developer Tools' thingy. 回答1: Is this what you're after?: "How to Edit Source Files Directly in Chrome" http://www.sitepoint.com/edit-source-files-in-chrome/ 回答2: I'm not sure

View AJAX response content in Chrome developer tools?

浪子不回头ぞ 提交于 2019-11-27 11:53:13
Traditionally I use FireBug to debug my AJAX requests. It lets you examine both the contents of your request as well as the response that was sent back from the server. (it also notifies you in the console when these occur, which is a useful feature that Chrome seems to lack). In Chrome, I only seem to be able to view the requests, not the responses. When I try to examine the response the UI just displays "No Content Available" (Developer Tools > Resources > myRequest.php > Content). Do I have to turn something on to make the Chrome developer tools remember these requests? EDIT: In case it

How can I log an HTML element as a JavaScript object?

ⅰ亾dé卋堺 提交于 2019-11-27 11:04:40
Using Google Chrome, if you console.log an object, it lets you inspect the element in the console. For example: var a = { "foo" : "bar", "whiz" : "bang" }; console.log(a); This prints out Object which can be inspected by clicking on arrows next to it. If however I try to log an HTMLElement: var b = goog.dom.query('html')[0]; console.log(b); This prints out <html></html> which can not be inspected by clicking on arrows next to it. If I want to see the JavaScript object (with its methods and fields) instead of just the DOM of the element, how would I do that? Use console.dir : var element =

How can I log an HTML element as a JavaScript object?

北城余情 提交于 2019-11-27 05:11:56
问题 Using Google Chrome, if you console.log an object, it lets you inspect the element in the console. For example: var a = { "foo" : "bar", "whiz" : "bang" }; console.log(a); This prints out Object which can be inspected by clicking on arrows next to it. If however I try to log an HTMLElement: var b = goog.dom.query('html')[0]; console.log(b); This prints out <html></html> which can not be inspected by clicking on arrows next to it. If I want to see the JavaScript object (with its methods and

How can I reduce the waiting (ttfb) time

若如初见. 提交于 2019-11-27 05:04:08
问题 I have a query which involves getting a list of user from a table in sorted order based on at what time it was created. I got the following timing diagram from the chrome developer tools. You can see that TTFB (time to first byte) is too high. I am not sure whether it is because of the SQL sort. If that is the reason then how can I reduce this time? Or is it because of the TTFB. I saw blogs which says that TTFB should be less (< 1sec). But for me it shows >1 sec. Is it because of my query or

Custom.css has stopped working in 32.0.1700.76 m Google Chrome update

白昼怎懂夜的黑 提交于 2019-11-27 02:42:44
I use some themes for Google Developer Tools from this website: http://devthemez.com/themes/chrome-developer-tools However, after the 32.0.1700.76 m update, all themes have stopped working. What do I need to do to get them working again? Rob W Support for Custom.css has been removed from Chrome in version 32. This answer provides two methods for easily activating style sheets in the developer tools. The second method is recommended, but only works for Chrome 33+, the first method also works for Chrome 32. Both methods are Chrome extensions, to use the examples below, follow the following steps

Is it possible to select multiple elements in the Chrome Developer Tools Elements panel?

≯℡__Kan透↙ 提交于 2019-11-27 02:41:02
问题 Is it possible to select more than one element at a time in the Chrome Developer Tools Elements panel? Would be useful for deleting multiple sibling elements or quick re-ordering. I expected Command + Click or Shift + Click to do this but it didn't work. 回答1: The answer is NO, it is not possible to select more than one element at a time in the Chrome Dev-Tools. You may refer to the Chrome Dev-Tools Tips and Tricks https://developer.chrome.com/devtools/docs/tips-and-tricks 回答2: The Answer is

How to save websocket frames in Chrome

依然范特西╮ 提交于 2019-11-26 22:45:25
问题 I am logging websocket traffic using Chrome/Developer Tools. I have no problem to view the websocket frames in network "Frames" window, but I can not save all frames (content enc. as JSON) in an external (text) file. I have already tried save as HAR and also simply used cntl A,C,V (first "page" copied only) but have so far not been very successful. I am running Linux Mint 17. Do you have hints how this can be done? 回答1: Update for Chrome 63, January 2018 I managed to export them as JSON as

Open Safari / Google Chrome developer tools programmatically from JavaScript

天涯浪子 提交于 2019-11-26 22:34:12
I'm looking for a way to open the WebKit “developer tools” from a script attached to a web-page. I need solutions for both Google Chrome and Safari, that will open the developer-tools pane if it's not already open, and (hopefully, if you can figure out how) also switch to a particular tab/section of said pane upon opening. (Use-case, if anyone's interested: I want to open the console.log output-window if there's been an error and a developer is looking at the page; this particular page will be the output of some JavaScript unit-tests.) I'm setting a bounty on this question because it's