You can use JavaScript&#39;s performance observer to know the bottleneck of perf issues in your web app.

**Precise code** -

```javascript
const observer = new PerformanceObserver((list) =&gt; {
    console.log(&#39;Long Task detected! &#128681;️&#39;);
    const entries = list.getEntries();
    console.log(entries);
});

observer.observe({entryTypes: [&#39;longtask&#39;]});
```
More details [here][1]


  [1]: https://umaar.com/dev-tips/194-long-tasks/

I follow the instructions on read the docs but I get this error:

&gt; bash Sphinx error: master file
&gt; /home/docs/checkouts/readthedocs.org/user_builds/mybinders/checkouts/latest/docs/source/contents.rst
&gt; not found


Do have to you the read the docs yaml file?

Build Fail Sphinx Error contents.rst not found

How can I `npm install` a package into a different directory?

How to install NPM package under alias or different name

Chrome exhibits huge lags when viewing a given web page of mine. I&#39;m using the DevTools *Performance* tab to try and find the culprit which I assume to be somewhere in my JavaScript code.

The following screenshot shows a profile recorded using DevTools. For some of the &quot;tasks&quot; shown in the profile, I can see the details of what the tasks are doing (for example, the one between 8700 ms and 9200 ms is GC), but for other tasks there are no details whatsoever, like the two I have highlighted in the screenshot. How do I figure out what are those tasks doing?

[![Screenshot][1]][1]

  [1]: https://i.stack.imgur.com/JzTfs.png

Inexplicit &#39;task&#39; in Chrome Perfomance DevTools

Chrome exhibits huge lags when viewing a given web page of mine. I'm using the DevTools Performance tab to try and find the culprit which I assume to be somewhere in my JavaScript code.
The following screenshot shows a profile recorded using DevTools. For some of the "tasks" shown in the profile, I can see the details of what the tasks are doing (for example, the one between 8700 ms and 9200 ms is GC), but for other tasks there are no details whatsoever, like the two I have highlighted in the screenshot. How do I figure out what are those tasks doing?
<a href="https://i.stack.imgur.com/JzTfs.png" target="_blank" rel="noopener noreferrer"><img src="https://i.stack.imgur.com/JzTfs.png" alt="Screenshot"></a>

When I updated Angular from 7 to Angular 8, getting error for lazy loading modules


I have tried the options, which are there in the angular upgradation guide

Made the below changes:

**Before**

        loadChildren: &#39;../feature/path/sample- 
                             tage.module#SameTagModule&#39;
     
**After**

       loadChildren: () =&gt; import(&#39;../feature/path/sample- 
                          tags.module&#39;).then(m =&gt; m.CreateLinksModule)
       

&gt; error TS1323: Dynamic import is only supported when &#39;--module&#39; flag is
&gt; &#39;commonjs&#39; or &#39;esNext&#39;.

Angular 8 - Lazy loading modules : Error TS1323: Dynamic import is only supported when &#39;--module&#39; flag is &#39;commonjs&#39; or &#39;esNext&#39;

Windows and macOS now have dark mode.

For CSS I can use:
```lang-css
@media (prefers-dark-interface) { 
  color: white; background: black 
}
```
But I am using [the Stripe Elements API, which puts colors in JavaScript](https://stripe.com/docs/stripe-js/reference#the-elements-object)

For example:

```lang-js
const stripeElementStyles = {
  base: {
    color: COLORS.darkGrey,
    fontFamily: `-apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;`,
    fontSize: &#39;18px&#39;,
    fontSmoothing: &#39;antialiased&#39;,
    &#39;::placeholder&#39;: {
      color: COLORS.midgrey
    },
    &#39;:-webkit-autofill&#39;: {
      color: COLORS.icyWhite
    }
  }
}
```

**How can I detect the OS&#39;s preferred color scheme in JavaScript?**

How do I detect dark mode using JavaScript?

I&#39;m using Jest to write some specs and ESLint to lint the styling. 

For my `foo.spec.js` tests, eslint keeps throwing the following errors. It seems to think that `jest`, `beforeEach`, `afterEach`, etc... are not defined in that file. 



       11:1   error  &#39;beforeEach&#39; is not defined  no-undef
       12:3   error  &#39;jest&#39; is not defined        no-undef
       14:13  error  &#39;jest&#39; is not defined        no-undef
       18:1   error  &#39;afterEach&#39; is not defined   no-undef
       20:1   error  &#39;describe&#39; is not defined    no-undef
       21:3   error  &#39;it&#39; is not defined          no-undef
       25:5   error  &#39;expect&#39; is not defined      no-undef
       28:5   error  &#39;expect&#39; is not defined      no-undef
       31:5   error  &#39;expect&#39; is not defined      no-undef
       34:3   error  &#39;it&#39; is not defined          no-undef
       38:5   error  &#39;expect&#39; is not defined      no-undef
       41:5   error  &#39;jest&#39; is not defined        no-undef
       42:5   error  &#39;expect&#39; is not defined      no-undef
       43:5   error  &#39;expect&#39; is not defined      no-undef
       46:3   error  &#39;it&#39; is not defined          no-undef
       54:5   error  &#39;expect&#39; is not defined      no-undef
       58:5   error  &#39;jest&#39; is not defined        no-undef


I believe those are included by jest automatically and so they don&#39;t need to be explicitly imported in my spec files. In fact the only thing I import via my `jest.setup.js` file is

    import &quot;react-testing-library/cleanup-after-each&quot;;
    import &quot;jest-dom/extend-expect&quot;;

Is there a way to eliminate these errors without having to disable eslint rules at the top of each individual file or inline? 

Thanks!

eslint throws `no-undef` errors when linting Jest test files

I have list of dropdown options which user can select.

optinos in dropdown are made with tag: &lt; a href&gt;:

```
&lt;a onClick={() =&gt; handleSelect(filter)} role=&quot;button&quot;&gt;
   {filter.name}
&lt;/a&gt;
```

Problem is cus I must add `tabIndex=&quot;0&quot; or -1`, to fix error from Eslint. 

But When I add `tabIndex=0`, my button does not work anymore. 

Is there are any other way to fix this error?

This is how looks dropdown component:
```
&lt;ul name=&quot;filters&quot; className=&quot;dropdown&quot;&gt;
    {filterOptions.map((filter) =&gt; (
      &lt;li
        key={filter.id}
        defaultChecked={filter.name}
        name={filter.name}
        className={`option option-${filter.selected ? &#39;selected&#39; : &#39;unselected&#39;}`}
      &gt;
        &lt;span className={`option-${filter.selected ? &#39;checked-box&#39; : &#39;unchecked-box&#39;} `} /&gt;

        &lt;a onClick={() =&gt; handleSelect(filter)} role=&quot;button&quot;&gt;
          {filter.name}
        &lt;/a&gt;
      &lt;/li&gt;
    ))}
  &lt;/ul&gt;
```

How to fix &#39;button&#39; interactive role must be focusable

I&#39;m making use of `matchMedia().addListener` to detect dark/light mode theme preference changes in Safari, however in WebStorm using `addListener` is marked as deprecated but simply says to refer to documentation for what should replace it.

I&#39;ve had a read through the MDN docs and I don&#39;t understand what event type I should be listening for in `addEventListener` to replace `addListener`?

```js
window.matchMedia(&quot;(prefers-color-scheme: dark)&quot;).addListener(() =&gt; this.checkNative());
window.matchMedia(&quot;(prefers-color-scheme: light)&quot;).addListener(() =&gt; this.checkNative());
```

matchMedia().addListener marked as deprecated, addEventListener equivalent?

When running a sum loop over an array in Rust, I noticed a huge performance drop when `CAPACITY` &gt;= 240. `CAPACITY` = 239 is about 80 times faster. 

Is there special compilation optimization Rust is doing for &quot;short&quot; arrays? 

Compiled with `rustc -C opt-level=3`.

```rust
use std::time::Instant;

const CAPACITY: usize = 240;
const IN_LOOPS: usize = 500000;

fn main() {
    let mut arr = [0; CAPACITY];
    for i in 0..CAPACITY {
        arr[i] = i;
    }
    let mut sum = 0;
    let now = Instant::now();
    for _ in 0..IN_LOOPS {
        let mut s = 0;
        for i in 0..arr.len() {
            s += arr[i];
        }
        sum += s;
    }
    println!(&quot;sum:{} time:{:?}&quot;, sum, now.elapsed());
}
```

Why is there a large performance impact when looping over an array with 240 or more elements?

`std::variant` vs. inheritance vs. other ways (performance)

I thought it would be quicker to create directly, but in fact, adding loops takes only half the time. What happened that slowed down so much?

Here is the test code
```
@BenchmarkMode(Mode.AverageTime)
@OutputTimeUnit(TimeUnit.MICROSECONDS)
public class Test_newArray {
    private static int num = 10000;
    private static int length = 10;

    @Benchmark
    public static int[][] newArray() {
        return new int[num][length];
    }

    @Benchmark
    public static int[][] newArray2() {
        int[][] temps = new int[num][];
        for (int i = 0; i &lt; temps.length; i++) {
            temps[i] = new int[length];
        }
        return temps;
    }

}
```
The test results are as follows.
```
Benchmark                Mode  Cnt    Score   Error  Units
Test_newArray.newArray   avgt   25  289.254 &#177; 4.982  us/op
Test_newArray.newArray2  avgt   25  114.364 &#177; 1.446  us/op
```
The test environment is as follows

JMH version: 1.21

VM version: JDK 1.8.0_212, OpenJDK 64-Bit Server VM, 25.212-b04

Why does allocating a single 2D array take longer than a loop allocating multiple 1D arrays of the same total size and shape?

I see that `React.forwardRef` seems to be the sanctioned way of passing a ref to a child functional component, from the react docs:

    const FancyButton = React.forwardRef((props, ref) =&gt; (
      &lt;button ref={ref} className=&quot;FancyButton&quot;&gt;
        {props.children}
      &lt;/button&gt;
    ));

    // You can now get a ref directly to the DOM button:
    const ref = React.createRef();
    &lt;FancyButton ref={ref}&gt;Click me!&lt;/FancyButton&gt;;

However, what is the advantage of doing this over simply passing a custom prop?:

    const FancyButton = ({ innerRef }) =&gt; (
      &lt;button ref={innerRef} className=&quot;FancyButton&quot;&gt;
        {props.children}
      &lt;/button&gt;
    ));

    const ref = React.createRef();
    &lt;FancyButton innerRef={ref}&gt;Click me!&lt;/FancyButton&gt;;

The only advantage I can think of is maybe having a consistent api for refs, but is there any other advantage? Does passing a custom prop affect diffing when it comes to rendering and cause additional renders, surely not as the ref is stored as mutable state in the `current` field?

Say for example you wanted to pass multiple refs (which tbh, might indicate code smell, but still), then the only solution I can see would be to use customRef props.

I guess my question is what is the value of using `forwardRef` over a custom prop?

value of using React.forwardRef vs custom ref prop

In ISO/IEC 9899:2018 (C18), it is stated under 7.20.1.3:

&gt; 7.20.1.3 Fastest minimum-width integer types

&gt; 1 Each of the following types designates an integer type that is usually fastest&lt;sup&gt;268)&lt;/sup&gt; to operate with among all integer types that have at least the specified width.

&gt; 2 The typedef name `int_fastN_t` designates the fastest signed integer type with a width of at least N. The typedef name `uint_fastN_t` designates the fastest unsigned integer type with a width of at least N.

&gt; 3 The following types are required:

&gt; `int_fast8_t`, `int_fast16_t`, `int_fast32_t`, `int_fast64_t`,
`uint_fast8_t`, `uint_fast16_t`, `uint_fast32_t`, `uint_fast64_t`

&gt; All other types of this form are optional.
_______

&gt;&lt;sup&gt;268)&lt;/sup&gt; The designated type is not guaranteed to be fastest for all purposes; if the implementation has no clear grounds for choosing one type over another, it will simply pick some integer type satisfying the signedness and width requirements.

_________________________________

But it is not stated why these &quot;fast&quot; integer types are faster.

- Why are these fast integer types faster than the other integer types?
_______________________

&lt;sub&gt;I tagged the question with C++, because the fast integer types are also available in C++17 in the header file of `cstdint`. Unfortunately, in ISO/IEC 14882:2017 (C++17) there is no such section about their explanation; I had implemented that section otherwise in the question&#180;s body.&lt;/sub&gt;

__________________________________

Information: In C, they are declared in the header file of `stdint.h`.




Why are the fast integer types faster than the other integer types?

My web client application is setting HTTP POST requests via fetch API. 

I see that OPTIONS preflight requests are sent via debugging proxy (Charles Proxy), but they are not displayed in Google Chrome Developer Tools\Network tab. 

I don&#39;t have any filters setup on the network tab. I remember OPTIONS requests being visible there, but not anymore. How do I bring them back?

Chrome not showing OPTIONS requests in Network tab

Chrome 76 has added support for `prefers-color-scheme` media query (a.k.a. &quot;dark mode&quot;). 

But how can I test my webpage in both color schemes easily, without toggling the system dark mode on and off?

Here is the [same question](https://stackoverflow.com/questions/56401662/firefox-how-to-test-prefers-color-scheme) for Firefox, but I can&#39;t find similar settings in Chrome &amp; Chrome DevTools.

How can I emulate prefers-color-scheme media query in Chrome?

Is anybody else getting this Chrome console warning? 

&gt; A cookie associated with a cross-site resource at &lt;URL&gt; was set
&gt; without the `SameSite` attribute. A future release of Chrome will only
&gt; deliver cookies with cross-site requests if they are set with
&gt; `SameSite=None` and `Secure`. You can review cookies in developer
&gt; tools under Application&gt;Storage&gt;Cookies and see more details at &lt;URL&gt;
&gt; and &lt;URL&gt;.

In Chrome Flags chrome://flags/ I&#39;ve tried disabling both: 

 - SameSite by default cookies
   
 - Cookies without SameSite must be secure

And the warning won&#39;t go away. 


Chrome Console SameSite Cookie Attribute Warning

I&#39;m currently working on a website, which triggers a ```net::ERR_HTTP2_PROTOCOL_ERROR 200``` error on Google Chrome. I&#39;m not sure exactly what can provoke this error, I just noticed it pops out only when accessing the website in HTTPS. I can&#39;t be 100% sure it is related, but it looks like it prevents JavaScript to be executed properly.

For instance, the following scenario happens :

1. I&#39;m accessing the website in HTTPS

2. My Twitter feed integrated via https://publish.twitter.com  isn&#39;t loaded at all 

3. I can notice in the console the ERR_HTTP2_PROTOCOL_ERROR

4. If I remove the code to load the Twitter feed, the error remains

5. If I access the website in HTTP, the Twitter feed appears and the error disappears 

Google Chrome is the only web browser triggering the error: it works well on both Edge and Firefox.
(NB: I tried with Safari, and I have a similar ```kcferrordomaincfnetwork 303``` error)

I was wondering if it could be related to the header returned by the server since there is this &#39;200&#39; mention in the error, and a 404 / 500 page isn&#39;t triggering anything. 

Thing is the error isn&#39;t documented at all. Google search gives me very few results. Moreover, I noticed it appears on very recent Google Chrome releases; the error doesn&#39;t pop on v.64.X, but it does on v.75+ (regardless of the OS; I&#39;m working on Mac tho).

----------


Might be related to https://stackoverflow.com/questions/49927327/website-ok-on-firefox-but-not-on-safari-kcferrordomaincfnetwork-error-303-neit


----------


Findings from further investigations are the following:

 - **error doesn&#39;t pop on the exact same page if server returns 404 instead of 2XX**
 - error doesn&#39;t pop on local with a HTTPS certificate
 - error pops on a different server (both are OVH&#39;s), which uses a different certificate
 - error pops no matter what PHP version is used, from 5.6 to 7.3 (framework used : Cakephp 2.10)

As requested, below is the returned header for the failing ressource, which is the whole web page. Even if the error is triggering on each page having a HTTP header 200, those pages are always loading on client&#39;s browser, but sometimes an element is missing (in my exemple, the external Twitter feed). Every other asset on the Network tab has a success return, except the whole document itself. 
[![line that failed in console][1]][1]

Google Chrome header (with error):

[![Chrome header][2]][2]


Firefox header (without error):

[![Firefox header][3]][3]

A ```curl --head --http2``` request in console returns the following success:
```
HTTP/2 200 
date: Fri, 04 Oct 2019 08:04:51 GMT
content-type: text/html; charset=UTF-8
content-length: 127089
set-cookie: SERVERID31396=2341116; path=/; max-age=900
server: Apache
x-powered-by: PHP/7.2
set-cookie: xxxxx=0919c5563fc87d601ab99e2f85d4217d; expires=Fri, 04-Oct-2019 12:04:51 GMT; Max-Age=14400; path=/; secure; HttpOnly
vary: Accept-Encoding
```

----------

Trying to go deeper with the chrome://net-export/ and https://netlog-viewer.appspot.com tools is telling me the request ends with a RST_STREAM :
```
t=123354 [st=5170]    HTTP2_SESSION_RECV_RST_STREAM
                      --&gt; error_code = &quot;2 (INTERNAL_ERROR)&quot;
                      --&gt; stream_id = 1
```
For what I read in [this other post][4], &quot;*In HTTP/2, if the client wants to abort the request, it sends a RST_STREAM. When the server receives a RST_STREAM, it will stop sending DATA frames to the client, thereby stopping the response (or the download). The connection is still usable for other requests, and requests/responses that were concurrent with the one that has been aborted may continue to progress.
[...]
It is possible that by the time the RST_STREAM travels from the client to the server, the whole content of the request is in transit and will arrive to the client, which will discard it. However, for large response contents, sending a RST_STREAM may have a good chance to arrive to the server before the whole response content is sent, and therefore will save bandwidth.*&quot;

The described behavior is the same as the one I can observe. But that would mean the browser is the culprit, and then I wouldn&#39;t understand why it happens on two identical pages with one having a 200 header and the other a 404 (same goes if I disable JS).
 

  [1]: https://i.stack.imgur.com/ZkdHo.png
  [2]: https://i.stack.imgur.com/0wCrD.png
  [3]: https://i.stack.imgur.com/AAtn8.png
  [4]: https://stackoverflow.com/questions/28736463/rst-stream-frame-in-http2

What&#39;s the net::ERR_HTTP2_PROTOCOL_ERROR about?

Since the last update, I&#39;m having an error with cookies, related with SameSite attribute.

The cookies are from third party developers (Fontawesome, jQuery, Google Analytics, Google reCaptcha, Google Fonts, etc.)

The errors in the Chrome console are like this.

``` lang-none
A cookie associated with a cross-site resource at &lt;URL&gt; was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application&gt;Storage&gt;Cookies and see more details at &lt;URL&gt; and &lt;URL&gt;.
(index):1 A cookie associated with a cross-site resource at http://jquery.com/ was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application&gt;Storage&gt;Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.
(index):1 A cookie associated with a cross-site resource at http://fontawesome.com/ was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application&gt;Storage&gt;Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.
(index):1 A cookie associated with a cross-site resource at http://google.com/ was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application&gt;Storage&gt;Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.
(index):1 A cookie associated with a cross-site resource at https://google.com/ was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application&gt;Storage&gt;Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.
(index):1 A cookie associated with a cross-site resource at https://www.google.com/ was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application&gt;Storage&gt;Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.
(index):1 A cookie associated with a cross-site resource at http://www.google.com/ was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application&gt;Storage&gt;Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.
(index):1 A cookie associated with a cross-site resource at http://gstatic.com/ was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application&gt;Storage&gt;Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.
````

Is there anything I need to do in my local machine or server or is just some feature they should implement in future releases of their libraries?

SameSite warning Chrome 77

I am getting an error when trying to import a local file, though no problem when using npm packages.

#server.js

    import express from &#39;express&#39;
    import next from &#39;next&#39;
    
    import apis from &#39;./src/server/api&#39;

#api.js

    export default {
      ello: &#39;bye&#39;,
      jamie: &#39;hey&#39;
    }
    

#Starting app

    node --experimental-modules --inspect server.js


#Error

    For help, see: https://nodejs.org/en/docs/inspector
    (node:20153) ExperimentalWarning: The ESM module loader is experimental.
    internal/modules/esm/default_resolve.js:59
      let url = moduleWrapResolve(specifier, parentURL);
                ^
    
    Error: Cannot find module &#39;/var/www/goldendemon.hutber.com/src/server/api&#39; imported from /var/www/goldendemon.hutber.com/server.js
        at Loader.resolve [as _resolve] (internal/modules/esm/default_resolve.js:59:13)
        at Loader.resolve (internal/modules/esm/loader.js:70:33)
        at Loader.getModuleJob (internal/modules/esm/loader.js:143:40)
        at ModuleWrap.&lt;anonymous&gt; (internal/modules/esm/module_job.js:43:40)
        at link (internal/modules/esm/module_job.js:42:36) {
      code: &#39;ERR_MODULE_NOT_FOUND&#39;
    }



Node --experimental-modules - Error: Cannot find module

### My code

```lang-html
&lt;html&gt;
  &lt;head&gt;
    &lt;!-- Load TensorFlow.js --&gt;
    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/@tensorflow/tfjs&quot;&gt;&lt;/script&gt;
    &lt;!-- Load Posenet --&gt;
    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/@tensorflow-models/posenet&quot;&gt;&lt;/script&gt;
 &lt;/head&gt;

  &lt;body&gt;
    &lt;img id=&#39;cat&#39; src=&#39;./pose/images/aa_085.jpg&#39;/&gt;
  &lt;/body&gt;
  &lt;!-- Place your code in the script tag below. You can also use an external .js file --&gt;
  &lt;script&gt;
    var flipHorizontal = false;

    var imageElement = document.getElementById(&#39;cat&#39;);

    posenet.load().then(function(net) {
      const pose = net.estimateSinglePose(imageElement, {
        flipHorizontal: true
      });
      return pose;
    }).then(function(pose){
      console.log(pose);
    })
  &lt;/script&gt;
&lt;/html&gt;
```

I rarely use HTML and JavaScript and almost forget the most fundamentals. What is the error? 

### Error information

&gt; [DevTools][1] failed to load SourceMap: Could not load content for https://cdn.jsdelivr.net/npm/@tensorflow/tf.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

  [1]: https://developers.google.com/web/tools/chrome-devtools/



How to fix the &quot;DevTools failed to load SourceMap: Could not load content&quot; error when adding a JavaScript library?

I created a simple webpack based project to learn snabbdom. Everything was OK except that sourcemap failed loading:

[![enter image description here][1]][1]

I don&#39;t know whose issue(webpack, chrome) it is. Is there anyone who know it?

Reproduction steps:

    git clone https://github.com/tomwang1013/snabbdom-test.git
    npm install
    npm run dev


  [1]: https://i.stack.imgur.com/c9Pws.png

Content Type	Original Author	Original Content on Stackoverflow
Question	Sergei Illarionov	View Question on Stackoverflow
Solution 1 - Javascript	C Ankita	View Answer on Stackoverflow

Inexplicit 'task' in Chrome Perfomance DevTools

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

How to install NPM package under alias or different name

Build Fail Sphinx Error contents.rst not found

Attributions