You can also select any text node in the elements panel, then look at the bottom of the [computed styles](https://developers.google.com/web/updates/2013/09/DevTools-answers-What-font-is-that) tab to see what fonts are rendered for that element

[![Google Chrome styles tab showing computed rendered fonts][1]][1]


  [1]: https://i.stack.imgur.com/XcWdA.png

You can view the downloaded web fonts using the Network tab:

[![Google Chrome Network tab showing downloaded web fonts][1]][1]

  [1]: http://i.stack.imgur.com/Bnq4c.png

**The best way so far**

You can actaully do `rightclick: inspect &gt; Application (on the top tabs) &gt; Frames (scroll on the left tabs)` Then you can find a `Font` section where all loaded fonts are listed. It lists all fonts that are loaded in any possible secure way.

**The best part is that, It also previews them on the right, to make it even easier to find the one**

[![Application tab][1]][1]

Then you can right-click on the one you chose and click open in a new tab, and it downloads it. Then you can add a .woff at the end of the filename and use it anywhere you like. (you can get its extension on the bottom of the preview too)

  [1]: https://i.stack.imgur.com/9DkKn.png

Is there a way to flush all cache in Laravel 4? I&#39;m using *file* for caching. I read on the docs that you can use `Cache::forget(&#39;key&#39;)` , but what if I need to delete all the cache?

An artisan command can also be useful, I think there&#39;s an issue on the repo, but not sure if it&#39;s implemented yet.

Thanks!


Flush all cache in Laravel 4

I use the version of [bootstrap-datepicker][1] maintained by [eternicode][2] (Andrew Rowls).

On Bootstrap 2 it worked, but now it doesn&#39;t work with the Bootstrap 3 library.

How can I get [bootstrap-datepicker][1] to work with `Bootstrap 3`?

  [1]: https://github.com/uxsolutions/bootstrap-datepicker
  [2]: https://github.com/eternicode

**Note:** The repository moved from [eternicode][2] to an organization account (uxsolutions).

How do I get bootstrap-datepicker to work with Bootstrap 3?

What tab in chrome inspector shows the font files you&#39;re loading via font-face? I can&#39;t find it under resources. I&#39;m having an issue where one group of font-family files are loading, but another font-family is not. I have checked everything from going directly to the URL and seeing they are indeed present, but I would like to look in the inspector and see it loading the one font-family but not the other. Is this possible with chrome?

Where to see font files loaded by chrome in the inspector?

<p>What tab in chrome inspector shows the font files you're loading via font-face? I can't find it under resources. I'm having an issue where one group of font-family files are loading, but another font-family is not. I have checked everything from going directly to the URL and seeing they are indeed present, but I would like to look in the inspector and see it loading the one font-family but not the other. Is this possible with chrome?</p>


**How can I inspect an element which disappears when my mouse moves away?**
![Example dropdown which disappears][1]

I don&#39;t know it&#39;s ID, class or anything but want to inspect it.

**Solutions I have tried:**

Run jQuery selector inside console `$(&#39;*:contains(&quot;some text&quot;)&#39;)` but didn&#39;t have any luck mainly because the element is not hidden but probably removed from the DOM tree.

Manually inspecting DOM tree for changes gives me nothing as it seems to be just too fast to notice what have changed.

  [1]: http://i.stack.imgur.com/FVOVx.png

**SUCCESS:**

I have been successful with Event breakpoints. Specifically - mousedown in my case. Just go to `Sources-&gt; Event Listener Breakpoints-&gt; Mouse-&gt; mousedown` in Chrome. After that I clicked the element I wanted to inspect and inside `Scope Variables` I saw some useful directions.

How can I inspect disappearing element in a browser?

I have Windows 8.1 installed on my computer and regularly use Fiddler to capture web traffic.

Recently, however, when I open Fiddler and have it capture web traffic, my Internet connectivity dies. The error I get when I open IE is &quot;This page cannot be displayed.&quot; In Chrome, I get &quot;The web page is not available&quot; with the following error: `Error code: ERR_CONNECTION_RESET`. 

Fiddler doesn&#39;t even capture any of the requests going out. The weird thing is, this problem randomly starts, but then in an hour or two, it&#39;s fine. I don&#39;t restart Fiddler; it just suddenly starts working again.

I tried following the steps in [Fiddler and Internet Explorer 11 on Windows 8.1][1], but that didn&#39;t help.

Why is Fiddler having this problem, and how can I fix it?


  [1]: http://fiddler2.com/blog/blog/2013/08/02/fiddler-and-internet-explorer-11-on-windows-8-1

Fiddler causes my Internet access to stop working

I&#39;ve created a very simple test case that creates a Backbone view, attaches a handler to an event, and instantiates a user-defined class. I believe that by clicking the &quot;Remove&quot; button in this sample, everything will be cleaned up and there should be no memory leaks.

A jsfiddle for the code is here: http://jsfiddle.net/4QhR2/

    // scope everything to a function
    function main() {
        
        function MyWrapper() {
            this.element = null;
        }
        MyWrapper.prototype.set = function(elem) {
            this.element = elem;
        }
        MyWrapper.prototype.get = function() {
            return this.element;
        }
        
        var MyView = Backbone.View.extend({
            tagName : &quot;div&quot;,
            id : &quot;view&quot;,
            events : {
                &quot;click #button&quot; : &quot;onButton&quot;,
            },    
            initialize : function(options) {        
                // done for demo purposes only, should be using templates
                this.html_text = &quot;&lt;input type=&#39;text&#39; id=&#39;textbox&#39; /&gt;&lt;button id=&#39;button&#39;&gt;Remove&lt;/button&gt;&quot;;        
                this.listenTo(this,&quot;all&quot;,function(){console.log(&quot;Event: &quot;+arguments[0]);});
            },
            render : function() {        
                this.$el.html(this.html_text);
                
                this.wrapper = new MyWrapper();
                this.wrapper.set(this.$(&quot;#textbox&quot;));
                this.wrapper.get().val(&quot;placeholder&quot;);
                
                return this;
            },
            onButton : function() {
                // assume this gets .remove() called on subviews (if they existed)
                this.trigger(&quot;cleanup&quot;);
                this.remove();
            }
        });
        
        var view = new MyView();
        $(&quot;#content&quot;).append(view.render().el);
    }

    main();

However, I am unclear how to use Google Chrome&#39;s profiler to verify that this is, in fact, the case. There are a gazillion things that show up on the heap profiler snapshot, and I have no idea how to decode what&#39;s good/bad. The tutorials I&#39;ve seen on it so far either just tell me to &quot;use the snapshot profiler&quot; or give me a hugely detailed manifesto on how the entire profiler works. Is it possible to just use the profiler as a tool, or do I really have to understand how the whole thing was engineered?

**EDIT:** Tutorials like these:

[Gmail memory leak fixing](https://docs.google.com/presentation/d/1wUVmf78gG-ra5aOxvTfYdiLkdGaR9OhXRnOlIcEmu2s/pub?start=false&amp;loop=false&amp;delayms=3000#slide=id.g14717ff3_0_23)

[Using DevTools](http://addyosmani.com/blog/taming-the-unicorn-easing-javascript-memory-profiling-in-devtools/)

Are representative of some of the stronger material out there, from what I&#39;ve seen. However, beyond introducing the concept of the *3 Snapshot Technique*, I find they offer very little in terms of practical knowledge (for a beginner like me). The &#39;Using DevTools&#39; tutorial doesn&#39;t work through a real example, so its vague and general conceptual description of things aren&#39;t overly helpful. As for the &#39;Gmail&#39; example:

&gt;***So you found a leak. Now what?***
&gt;
&gt;- Examine the retaining path of leaked objects in the lower half of the Profiles panel
&gt;
&gt;- If the allocation site cannot be easily inferred (i.e. event listeners):
&gt;
&gt;- Instrument the constructor of the retaining object via the JS console to save the stack trace for allocations
&gt;
&gt;- Using Closure? Enable the appropriate existing flag (i.e. goog.events.Listener.ENABLE_MONITORING) to set the creationStack property during construction

I find myself more confused after reading that, not less. And, again, it&#39;s just telling me to *do* things, not *how* to do them. From my perspective, all of the information out there is either too vague or would only make sense to someone who already understood the process.

Some of these more specific issues have been raised in [@Jonathan Naguin&#39;s answer](https://stackoverflow.com/a/19726918/20578) below.

Finding JavaScript memory leaks with Chrome

I accidently checked the &quot;disable alerts from this site&quot; box in Chrome, and now I cannot get any window.alert to work on my localhost.

I have tried resetting the settings in advanced but no luck.

Re-enabling window.alert in Chrome

The issue is that when I invoke `window.close()` or `self.close()` it doesn&#39;t close the window. Now there seems to be a belief that in Chrome you can&#39;t close by script any window that is not script created. That is patently false but regardless it is supposed to still do it, even if it requires to pop up an alert to confirm. These are not happening.

So does anyone have real, functional and proven method of closing a window using something like `javascript:window.close()` or `javascript:self.close()` that actually does what is expected and something that happens just fine in every browser that is NOT Chrome based? Any suggestions would be greatly appreciated and I am looking for Javascript specific solution, nothing JQuery or third party implementation. 

**Update:** While much of what has been suggested has serious limitations and usability issues, the latest suggestion (specific to TamperMonkey) using **`// @grant        window.close`** in the script header will often do the trick even on those tabs that normally can&#39;t handle the close method. While not entirely ideal and doesn&#39;t generalized to every case, it is a good solution in my case.

window.close and self.close do not close the window in Chrome

I have `UITextView *_masterText` and after call method `setText` property font is being reset. 
It&#39;s happening after I change sdk 7. 
_masterText is `IBOutlet`, global and properties are set in storyboard. It&#39;s only me or this is general SDK bug?

    @interface myViewController : UIViewController
    {
      IBOutlet UITextView *_masterText;
    }
    
    @implementation myViewController

    -(void)viewWillAppear:(BOOL)animated
    {
        [_masterText setText:@&quot;New text&quot;];
    }

UITextView style is being reset after setting text property

I am trying to insert a user icon inside username input field. 

I&#39;ve tried one of the solution from the [similar question](https://stackoverflow.com/questions/14736496/use-font-awesome-icons-in-css) 
knowing that `background-image` property won&#39;t work since [Font Awesome](http://fortawesome.github.io/Font-Awesome/) is a font.

The following is my approach and I can&#39;t get the icon display.

    .wrapper input[type=&quot;text&quot;] {
        position: relative;
    }
    
    .wrapper input[type=&quot;text&quot;]:before {
        font-family: &#39;FontAwesome&#39;;
        position: absolute;
        top: 0px;
        left: -5px;
        content: &quot;\f007&quot;;
    }


I have font face declared in the default font awesome css so I wasn&#39;t sure if adding font-family above was the right approach.

   

     @font-face {
         font-family: &#39;FontAwesome&#39;;
         src: url(&#39;../Font/fontawesome-webfont.eot?v=3.2.1&#39;);
         src: url(&#39;../Font/fontawesome-webfont.eot?#iefix&amp;v=3.2.1&#39;) format(&#39;embedded-opentype&#39;), url(&#39;../Font/fontawesome-webfont.woff?v=3.2.1&#39;) format(&#39;woff&#39;), url(&#39;../Font/fontawesome-webfont.ttf?v=3.2.1&#39;) format(&#39;truetype&#39;), url(&#39;../Font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1&#39;) format(&#39;svg&#39;);
     }

Font Awesome icon inside text input element

In the answer to [this question][1] the user lists values for `android:fontFamily` and 12 variants (see below). Where do these values come from? The documentation for `android:fontFamily` does not list this information in any place (I checked [here][2], and [here][3]). The strings are listed in the Android [styles.xml][4] file in various places, but how do these map back to the Roboto font?

&gt; From android 4.1 / 4.2, the following Roboto font families are
&gt; available:
&gt; 
&gt;     android:fontFamily=&quot;sans-serif&quot;           // roboto regular  
&gt;     android:fontFamily=&quot;sans-serif-light&quot;     // roboto light  
&gt;     android:fontFamily=&quot;sans-serif-condensed&quot; // roboto condensed  
&gt;     android:fontFamily=&quot;sans-serif-thin&quot;      // roboto thin (android 4.2)  
&gt;     android:fontFamily=&quot;sans-serif-medium&quot;    // roboto medium (android 5.0)
&gt;
&gt; in combination with this
&gt; 
&gt;     android:textStyle=&quot;normal|bold|italic&quot; 

&gt; 12 variants are possible:
&gt; 
&gt; * Regular 
&gt; * Italic 
&gt; * Bold 
&gt; * Bold-italic 
&gt; * Light 
&gt; * Light-italic 
&gt; * Thin 
&gt; * Thin-italic
&gt; * Condensed regular 
&gt; * Condensed italic 
&gt; * Condensed bold 
&gt; * Condensed bold-italic


In the `styles.xml` file in the application I&#39;m working on somebody listed this as the font family, and I&#39;m pretty sure it&#39;s wrong:

`&lt;item name=&quot;android:fontFamily&quot;&gt;Roboto-Regular.ttf&lt;/item&gt;`

I&#39;d like to get the theme for our app set up correctly (which includes using fontFamily correctly) and remove all the redundancy that is in some of the styles that were created before I had a look at the file.

  [1]: https://stackoverflow.com/questions/12128331/how-to-change-fontfamily-of-textview-in-android
  [2]: http://developer.android.com/reference/android/widget/TextView.html#attr_android:fontFamily
  [3]: http://developer.android.com/reference/android/R.attr.html#fontFamily
  [4]: https://github.com/android/platform_frameworks_base/blob/master/core/res/res/values/styles.xml

Valid values for android:fontFamily and what they map to?

So i have this code that should change the nav bar title font, but it doenst

        NSDictionary *attributes = [NSDictionary dictionaryWithObjectsAndKeys:[UIFont
                                                                           fontWithName:_dataManager.optionsSettings.fontString size:14], NSFontAttributeName,
                                [UIColor whiteColor], NSForegroundColorAttributeName, nil];
    
    [[UINavigationBar appearance] setTitleTextAttributes:attributes];

Changing the back button font with this code works just fine.

       //set backbutton font
    NSDictionary *normalAttributes = [NSDictionary dictionaryWithObjectsAndKeys:
                                      [UIFont fontWithName:_dataManager.optionsSettings.fontString size:15], NSFontAttributeName,
                                      nil];
    [[UIBarButtonItem appearance] setTitleTextAttributes:normalAttributes
                                                forState:UIControlStateNormal];



iOS change navigation bar title font and color

I have tired many things but i can&#39;t get it even though my computer has it.

How can I access this wont files? They have the .woff extension. Double clicking them in chrome  inspector just takes to some url. Which doesn&#39;t work. 

Nor this font is installed on my computer. 

This is in fact first time in my life I have come across woff format and the concept web open format. I want to download the font website is using. I know I can download the images why not wont.

![enter image description here][1]


  [1]: http://i.stack.imgur.com/vAoAf.jpg

How do I download/extract font from chrome developers tools?

In my ASP.NET MVC application, I&#39;m using Bundles to compress css and js files. The problem is - the fonts are not loading after i enable the optimization mode. 

    BundleTable.EnableOptimizations = true;

Here is the C# code

    public static void RegisterBundles(BundleCollection bundles) {
        RegisterStyles(bundles);
        BundleTable.EnableOptimizations = true;
    }

    private static void RegisterStyles(BundleCollection bundles) {
    bundles.Add(new StyleBundle(&quot;~/BundleStyles/css&quot;).Include(
		&quot;~/Content/Styles/bootstrap/bootstrap.css&quot;,
		&quot;~/Content/Styles/reset.css&quot;,
        &quot;~/Content/Styles/gridpack/gridpack.css&quot;,

        &quot;~/Content/Styles/fontFaces.css&quot;,
        &quot;~/Content/Styles/icons.css&quot;,

        &quot;~/Content/Styles/inputs.css&quot;,
        &quot;~/Content/Styles/common.css&quot;,
        &quot;~/Content/Styles/header.css&quot;,
        &quot;~/Content/Styles/footer.css&quot;,
        &quot;~/Content/Styles/cslider/slider-animations.css&quot;,
        &quot;~/Content/Styles/cslider/slider-base.css&quot;));
    }

And here is the css for fonts.

       @font-face {
          font-family: ProximaNova;
          src: url(&#39;../Fonts/ProximaNova/ProximaNova-Bold.otf&#39;) format(&#39;opentype&#39;);
          font-weight: bold;
          font-style: normal;
        }

Here is how CSS is beeing referenced in the page.

    &lt;link href=&quot;/BundleStyles/css?v=pANk2exqBfQj5bGLJtVBW3Nf2cXFdq5J3hj5dsVW3u01&quot; rel=&quot;stylesheet&quot;/&gt;

However, when i checked with Chrome Debugger tool, the font files are not loading to the page and my page looks bad with wrong fonts.

What am I doing wrong?

Font files are not loading with ASP.NET Bundles

I have to import the Klavika font and I&#39;ve received it in multiple shapes and sizes:

    Klavika-Bold-Italic.otf
    Klavika-Bold.otf
    Klavika-Light-Italic.otf
    Klavika-Light.otf
    Klavika-Medium-Italic.otf
    Klavika-Medium.otf
    Klavika-Regular-Italic.otf
    Klavika-Regular.otf
Now I would like to know if it&#39;s possible to import those into CSS with just one `@font-face`-query, where I&#39;m defining the `weight` in the query. I want to avoid copy/pasting the query 8 times.

So something like:

    @font-face {
      font-family: &#39;Klavika&#39;;
      src: url(../fonts/Klavika-Regular.otf), weight:normal;
      src: url(../fonts/Klavika-Bold.otf), weight:bold;
    }

Multiple font-weights, one @font-face query

[This exception occurs in here.][1] You can reproduce it in IE11. So far I have not found the cause of the issue. Any ideas why this is being caused?

![enter image description here][2]

&gt; CSS3114: @font-face failed OpenType embedding permission check.
&gt; Permission must be Installable. File:
&gt; 53d9eae5-63b4-48d7-a5b8-3419455028bb.ttf

The web site is running on Azure Websites platform and is using ASP.NET MVC 5.


  [1]: http://itmcup-stg.azurewebsites.net/
  [2]: http://i.stack.imgur.com/jpmqs.png

@font-face failed OpenType embedding permission check. Permission must be Installable

Up until now, I&#39;ve used Paul Irish&#39;s [bulletproof font-face syntax][1]

But I was just looking at support for .woff and .woff2 files on [caniuse][2] and it says woff is supported in IE9+. Most articles on this topic are from around 2009, which at the time of this writing was a full 7 years ago. Do we really need to keep declaring ttf, otf, eot, and svg when woff now enjoys such wide support? 


  [1]: http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/
  [2]: http://caniuse.com/#feat=woff

Are eot, ttf, and svg still necessary in the font-face declaration?

I noticed this `info log` began to appear in Google Chrome Dev (Version 55.0.2883.18 dev) and I can&#39;t imagine why.

&gt; Slow network is detected. Fallback font will be used while loading: http://font-path.extension`

It appears on all websites that use `font-face`, even on local pages and Chrome extensions.

[![Print screen of a local website][1]](https://i.stack.imgur.com/OrX5p.png)

  [1]: https://i.stack.imgur.com/OrX5p.png



Why does this &quot;Slow network detected...&quot; log appear in Chrome?

I&#39;m creating an `Ionic` app using `es6 modules`, `TypeScript` and `SystemJS` as a module loader. This is my setup:

**tsconfig.json:**

```json
{
  &quot;compilerOptions&quot;: {
    ...
    &quot;target&quot;: &quot;es5&quot;,
    &quot;module&quot;: &quot;system&quot;,
    ...
  }
}
```

**index.html:**

```html
&lt;script src=&quot;lib/system.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;systemjs.config.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;System.import(&#39;js/app.js&#39;)&lt;/script&gt;
```

**example script (TypeScript):**

```typescript
import {IConfig} from &quot;./app-config&quot;;
    
export class ConfigLoader {
    ...
}
```

Everything runs great in Chrome. However, when debugging using Safari&#39;s Web Inspector, I cannot place any breakpoints in the scripts because Web Inspector only shows scripts that are loaded directly from the HTML (through script tags), and not scripts loaded by XHR (in my case, by SystemJS). This means I cannot debug my own scripts, which is of course unacceptable.

I tried to work around this by using SystemJS like before, but also placing the script tags in the html, like so:

```html
&lt;script src=&quot;lib/system.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;systemjs.config.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;js/app-config.js&quot;&gt;&lt;/script&gt;
 ... other app scripts
&lt;script&gt;System.import(&#39;js/app.js&#39;)&lt;/script&gt;
```

However, this doesn&#39;t work, as SystemJS does not seem happy about this:

&gt; Invalid System.register call. Anonymous System.register calls can only
&gt; be made by modules loaded by SystemJS.import and not via script tags.

How do I use SystemJS and at the same time have the ability to debug in Safari? I&#39;m looking for a solution a little more sophisticated than &#39;put a debugger statement in each script&#39;...

Debugging in Safari&#39;s Web Inspector, when using a module loader like SystemJS

After upgrading to Xcode 11.3.1, I am having problems using Safari web inspector with the iOS 12.1 simulator. Every time that I run an app inside of an iOS 12.1 simulator device, it will show up in the Safari debug menu and allow me to connect to it, but the only tabs I will see are Sources, Console and Audit. 

Here is a screenshot of the inspector attached to an instance of the Safari browser inside of the simulator.

[![enter image description here][1]][1]


Is there any way to resolve this?


  [1]: https://i.stack.imgur.com/Lch96.png

Environment:

 - MacOS 10.14.6 (18G95)
 - Xcode 11.3.1
 - Safari 13.1 (14609.1.20.111.8)
 - Simulator Version 11.3.1 (SimulatorApp-912.5.1 SimulatorKit-570.3
   CoreSimulator-681.17.2)



Content Type	Original Author	Original Content on Stackoverflow
Question	o_O	View Question on Stackoverflow
Solution 1 - Google Chrome	cfg	View Answer on Stackoverflow
Solution 2 - Google Chrome	Adrift	View Answer on Stackoverflow
Solution 3 - Google Chrome	Abraham	View Answer on Stackoverflow

Where to see font files loaded by chrome in the inspector?

Google Chrome Problem Overview

Google Chrome Solutions

Solution 1 - Google Chrome

Solution 2 - Google Chrome

Solution 3 - Google Chrome

How do I get bootstrap-datepicker to work with Bootstrap 3?

Flush all cache in Laravel 4

Attributions