developer-tools | 易学教程

Chrome developer tools window dimensions are inconsistent

阅读更多关于 Chrome developer tools window dimensions are inconsistent

问题 When you have the Chrome developer tools open, and you resize the window, a small white box appears in the top right corner telling you the dimensions of the window as you resize it. I've marked it with a big green arrow in the screenshot below. This is a very useful tool, but I've noticed that frequently the values are unexpected and inconsistent with the widths of other elements. For example, when I took the screenshot below, Chrome says the window width is 419px. But if I click the html

Setting up rails dev env

阅读更多关于 Setting up rails dev env

问题 When I'm starting a rails app I usually go through the same process of getting my dev env set up. Adding pry-byebug or various guard-* gems, and initializing a Guardfile . Is there a better way to automate this process? Some ideas I thought of: Creating rake tasks that will add entries to Gemfile , run bundle install , and bundle exec guard init livereload , etc... Create a separate command line app that generates the right files and runs the right shell commands. Is there another simpler way

Are there problems with using a Dynamic View in RAD 7.5?

阅读更多关于 Are there problems with using a Dynamic View in RAD 7.5?

问题 Our team recently switched from using WSED 5.2 to using RAD 7.5 for our code development (we're a little behind the curve in development software). This, as well as a move to a WAS 7 server, is a mandatory move for us to complete, so moving to a different developer or server is not an option. Since moving to this new developer, I've been having problems making changes to the app and testing them on my local server. Refreshing the server doesn't help, nor does a Clean or a Publish to the

Can't see window size in Chrome

阅读更多关于 Can't see window size in Chrome

问题 I'm using Chrome developer tools for version 49.0.2623.110 m and I notice that the little box displaying the window WIDTHxHEIGHT when you resize is now gone or moved. Am I just not seeing it? Is it moved? I use Viewport Resizer now but I really missed having both options to check window size... 回答1: I was looking for answers to this problem myself, and I found a couple of pages. Apparently, it's a bug in Chrome v49, that should be fixed in Chrome 50. Here are a couple of links to the

Javascript listen for style changes made in developer-tools

阅读更多关于 Javascript listen for style changes made in developer-tools

问题 Is there a way to detect style changes made only in the developer-tools (inspect element)? I want to allow to save them if the user is logged in as admin. 回答1: You can access the styles of a HTMLElement using element.style in JavaScript. So you could probably save the styles on page load, check them again when the user initiates a save and compare -- the difference would be the users changes. As for detecting them as soon as they happen, you can use MutationObserver to get notified of

Fast way to download data:image from chromes developer tools network window?

阅读更多关于 Fast way to download data:image from chromes developer tools network window?

I'm looking for a fast way to download all of the images that i can see in the network tab on developer tools? they come through as data:image/png;base64 links. You can open them into a new tab individually and save them manually from there but that seems to be the only way. Saving the whole webpage or a .har file dosent seem to capture them. Neither dose any addon i have tried. :/ is there a fast way to save them all? since manually doing this would take a lifetime. Best regards, Matt The easiest way i have found to achieve what im looking for is to: filter by images, select one of the

Are there problems with using a Dynamic View in RAD 7.5?

阅读更多关于 Are there problems with using a Dynamic View in RAD 7.5?

Our team recently switched from using WSED 5.2 to using RAD 7.5 for our code development (we're a little behind the curve in development software). This, as well as a move to a WAS 7 server, is a mandatory move for us to complete, so moving to a different developer or server is not an option. Since moving to this new developer, I've been having problems making changes to the app and testing them on my local server. Refreshing the server doesn't help, nor does a Clean or a Publish to the server. Even clearing and rebuilding the projects doesn't seem to do the trick. The only thing that does

Chrome Developer Tools / debugger: “pretty print” does not work

阅读更多关于 Chrome Developer Tools / debugger: “pretty print” does not work

问题 The "pretty print" button, located in the lower left corner of the Chrome Developer Tools window, is supposed to make minified code readable. However, when I click it, nothing happens. I tried both single and double-clicks. This happes on Chrome 32 on Windows. How do I make the pretty-print button work? 回答1: As I found out the hard way (by trial and error) the "pretty print" button is only functional when the console is visible. That means it does not work here: But it does work here (console

How do you determine what is overriding your style? [duplicate]

阅读更多关于 How do you determine what is overriding your style? [duplicate]

问题 This question already has answers here : Chrome Developer Tools: How to find out what is overriding a CSS rule? (3 answers) Closed 3 years ago . When fiddling around with styles of sample code, I find the code has styles that will override my style because they will use a higher priority reference (e.g.: .div .class > .class ). I will encounter situations like this: How do I find out what style is overriding my style? I want to avoid using !important because eventually I'll end up in the same

Freeze keyframe animation for debugging

阅读更多关于 Freeze keyframe animation for debugging

问题 Is it possible to freeze a CSS keyframe animation with developer tools to inspect it? I need to identify animated elements in a keyframe animation. Here is a playground : body{background:#000;} .circle{ position:relative; width:10px;padding-bottom:50px; margin:100px auto; } .circle div { position:absolute; top:0; left:0; width:100%; height:100%; -webkit-animation: rotate 1.5s infinite; -moz-animation: rotate 1.5s infinite; -o-animation: rotate 1.5s infinite; animation: rotate 1.5s infinite;