Use the **Initiator** column in the **Network** panel. Clicking on the link in the Initiator cell takes you to the line of code where the request was made.

[![initiator column][1]][1]

If you can&#39;t see it, right-click on the table header and select **Initiator**.

You can also hold &lt;kbd&gt;Shift&lt;/kbd&gt; while hovering over a resource to see it&#39;s initiator. The initiator is green. Dependencies are red. If you can&#39;t see the initiator, then it&#39;s not currently visible on the table (could be higher up, filtered out, etc.)

[MacPrawn&#39;s XHR Breakpoint idea](https://stackoverflow.com/a/41451994/1669860) is a good approach, too.

  [1]: https://i.stack.imgur.com/ZJaMD.png

Since you see the request being made in the Network pane, you can grab the url and then add a XHR breakpoint on that URL:

[![In the breakpoint panel, on the right of the &quot;Sources&quot; pane][1]][1]

(In the breakpoint panel, on the right of the &quot;Sources&quot; pane)

Hope this helps!

  [1]: https://i.stack.imgur.com/OnlTn.png

App ran fine on React Native 0.35.0. After updating to 0.40.0 via ``react-native-git-upgrade`` I get a number of lexical/preprocessor issues when trying to build/run the app in XCode. 

``React/RCTBridgeModule.h&#39; file not found``

When clicking on the issue I see this highlighted:

``#import &lt;React/RCTBridgeModule.h&gt;``

It doesn&#39;t appear to be a search path issue.

I&#39;ve tried deleting node_modules and running ``npm install`` again, but that hasn&#39;t fixed anything.

React Native / Xcode Upgrade and now RCTConvert.h not found

I&#39;m using `.toLocaleString()` on react-native for my number output. All work on IOS but seems not working on Android. This is normal or? Do I need to use a function for the decimal?

[![enter image description here][1]][1]


  [1]: https://i.stack.imgur.com/sdA8f.jpg

react-native .toLocaleString() not working on android

Is there any way using chrome dev tools to find where an http request (ajax) was made?
I have a large project with many requests happening in different files. There&#39;s a particular request that I want to be able to inspect, I&#39;ve found it on the Network tab, but there doesn&#39;t seem to be any way to find where in the code was this request started.

find where in the code an http request was made using chrome dev tools

<p>Is there any way using chrome dev tools to find where an http request (ajax) was made?
I have a large project with many requests happening in different files. There's a particular request that I want to be able to inspect, I've found it on the Network tab, but there doesn't seem to be any way to find where in the code was this request started.</p>


So I have this code:

    axios({
        method: &#39;post&#39;,
        url,
        headers: { &#39;Content-Type&#39;: &#39;application/x-www-form-urlencoded&#39; },
        data: {
            json,
            type,
        }   
    })  

Originally I had the normal `axios.post` but I changed to this because I thought it might have been a header problem. However I am still detecting nothing in my `$_REQUEST` nor `$_POST`. However, it is receiving data in `file_get_contents(&quot;php://input&quot;)`. 

Any idea what is wrong?

&lt;b&gt;Edit&lt;/b&gt;

Okay I think I know what&#39;s wrong. It&#39;s posting it as a json object so it can only be read in the php://input. How do I change it to a normal string in axios?

Axios posting params not read by $_POST

I am following a JavaScript tutorial on W3Schools. While reading almost on each page they give note to user to &quot;Avoid creating objects&quot; and to use primitive data types instead. They give reason for this as &quot;code becomes difficult to understand or execution speed will be decreased if object are used&quot;. Is it true that we should avoid creating objects in JavaScript? 

For example:

    var value = new Number(1);  // Avoid this
    var value = 1;              // do something like this instead.

Why to avoid creating objects of primitives in JavaScript?

I am currently struggling with nesting routes using react router v4.

The closest example was the route config in the 
[React-Router v4 Documentation][1].

I want to split my app in 2 different parts.

A frontend and an admin area.

I was thinking about something like this:

    &lt;Match pattern=&quot;/&quot; component={Frontpage}&gt;
      &lt;Match pattern=&quot;/home&quot; component={HomePage} /&gt;
      &lt;Match pattern=&quot;/about&quot; component={AboutPage} /&gt;
    &lt;/Match&gt;
    &lt;Match pattern=&quot;/admin&quot; component={Backend}&gt;
      &lt;Match pattern=&quot;/home&quot; component={Dashboard} /&gt;
      &lt;Match pattern=&quot;/users&quot; component={UserPage} /&gt;
    &lt;/Match&gt;
    &lt;Miss component={NotFoundPage} /&gt;

The frontend has a different layout and style than the admin area. So within the frontpage the route home, about and so one should be the child routes.

**/home** should be rendered into the Frontpage component and **/admin/home** should be rendered within the Backend component. 

I tried some variations but I always ended in not hitting /home or /admin/home.


**Edit - 19.04.2017**

Because this post has a lot of views right now I updated it with the final solution. I hope it helps someone.

**Edit - 08.05.2017**

Removed old solutions

**Final solution:**

This is the final solution I am using right now. This example also has a global error component like a traditional 404 page.


    import React, { Component } from &#39;react&#39;;
    import { Switch, Route, Redirect, Link } from &#39;react-router-dom&#39;;
    
    const Home = () =&gt; &lt;div&gt;&lt;h1&gt;Home&lt;/h1&gt;&lt;/div&gt;;
    const User = () =&gt; &lt;div&gt;&lt;h1&gt;User&lt;/h1&gt;&lt;/div&gt;;
    const Error = () =&gt; &lt;div&gt;&lt;h1&gt;Error&lt;/h1&gt;&lt;/div&gt;
    
    const Frontend = props =&gt; {
      console.log(&#39;Frontend&#39;);
      return (
        &lt;div&gt;
          &lt;h2&gt;Frontend&lt;/h2&gt;
          &lt;p&gt;&lt;Link to=&quot;/&quot;&gt;Root&lt;/Link&gt;&lt;/p&gt;
          &lt;p&gt;&lt;Link to=&quot;/user&quot;&gt;User&lt;/Link&gt;&lt;/p&gt;
          &lt;p&gt;&lt;Link to=&quot;/admin&quot;&gt;Backend&lt;/Link&gt;&lt;/p&gt;
          &lt;p&gt;&lt;Link to=&quot;/the-route-is-swiggity-swoute&quot;&gt;Swiggity swooty&lt;/Link&gt;&lt;/p&gt;
          &lt;Switch&gt;
            &lt;Route exact path=&#39;/&#39; component={Home}/&gt;
            &lt;Route path=&#39;/user&#39; component={User}/&gt;
            &lt;Redirect to={{
              state: { error: true }
            }} /&gt;
          &lt;/Switch&gt;
          &lt;footer&gt;Bottom&lt;/footer&gt;
        &lt;/div&gt;
      );
    }
    
    const Backend = props =&gt; {
      console.log(&#39;Backend&#39;);
      return (
        &lt;div&gt;
          &lt;h2&gt;Backend&lt;/h2&gt;
          &lt;p&gt;&lt;Link to=&quot;/admin&quot;&gt;Root&lt;/Link&gt;&lt;/p&gt;
          &lt;p&gt;&lt;Link to=&quot;/admin/user&quot;&gt;User&lt;/Link&gt;&lt;/p&gt;
          &lt;p&gt;&lt;Link to=&quot;/&quot;&gt;Frontend&lt;/Link&gt;&lt;/p&gt;
          &lt;p&gt;&lt;Link to=&quot;/admin/the-route-is-swiggity-swoute&quot;&gt;Swiggity swooty&lt;/Link&gt;&lt;/p&gt;
          &lt;Switch&gt;
            &lt;Route exact path=&#39;/admin&#39; component={Home}/&gt;
            &lt;Route path=&#39;/admin/user&#39; component={User}/&gt;
            &lt;Redirect to={{
              state: { error: true }
            }} /&gt;
          &lt;/Switch&gt;
          &lt;footer&gt;Bottom&lt;/footer&gt;
        &lt;/div&gt;
      );
    }
    
    class GlobalErrorSwitch extends Component {
      previousLocation = this.props.location
    
      componentWillUpdate(nextProps) {
        const { location } = this.props;
    
        if (nextProps.history.action !== &#39;POP&#39;
          &amp;&amp; (!location.state || !location.state.error)) {
            this.previousLocation = this.props.location
        };
      }
    
      render() {
        const { location } = this.props;
        const isError = !!(
          location.state &amp;&amp;
          location.state.error &amp;&amp;
          this.previousLocation !== location // not initial render
        )
    
        return (
          &lt;div&gt;
            {          
              isError
              ? &lt;Route component={Error} /&gt;
              : &lt;Switch location={isError ? this.previousLocation : location}&gt;
                  &lt;Route path=&quot;/admin&quot; component={Backend} /&gt;
                  &lt;Route path=&quot;/&quot; component={Frontend} /&gt;
                &lt;/Switch&gt;}
          &lt;/div&gt;
        )
      }
    }
    
    class App extends Component {
      render() {
        return &lt;Route component={GlobalErrorSwitch} /&gt;
      }
    }
    
    export default App;


  [1]: https://react-router.now.sh/



Nested routes with react router v4 / v5

How do I clone a Javascript class instance using ES6.

I&#39;m not interested in solutions based on jquery or $extend.

I&#39;ve seen quite old discussions of object cloning that suggest that the problem is quite complicated, but with ES6 a very simple solution presents itself - I will put it below and see if people think it is satisfactory.

edit: it is being suggested that my question is a duplicate; I saw that answer but it is 7 years old and involves very complicated answers using pre-ES6 js.  I&#39;m suggesting that my question, which allows for ES6, has a dramatically simpler solution.

How to clone a javascript ES6 class instance

I&#39;m trying to use the on click directive inside a component but it does not seem to work. When I click the component nothings happens when I should get a &#39;test clicked&#39; in the console. I don&#39;t see any errors in the console, so I don&#39;t know what am I doing wrong.

**index.html**

    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
      &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;title&gt;vuetest&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
        &lt;div id=&quot;app&quot;&gt;&lt;/div&gt;
        &lt;!-- built files will be auto injected --&gt;
      &lt;/body&gt;
    &lt;/html&gt;

**App.vue**

    &lt;template&gt;
      &lt;div id=&quot;app&quot;&gt;
        &lt;test v-on:click=&quot;testFunction&quot;&gt;&lt;/test&gt;
      &lt;/div&gt;
    &lt;/template&gt;
    
    &lt;script&gt;
    import Test from &#39;./components/Test&#39;
    
    export default {
      name: &#39;app&#39;,
      methods: {
        testFunction: function (event) {
          console.log(&#39;test clicked&#39;)
        }
      },
      components: {
        Test
      }
    }
    &lt;/script&gt;

**Test.vue (the component)**

    &lt;template&gt;
      &lt;div&gt;
        click here
      &lt;/div&gt;
    &lt;/template&gt;
    
    &lt;script&gt;
    export default {
      name: &#39;test&#39;,
      data () {
        return {
          msg: &#39;Welcome to Your Vue.js App&#39;
        }
      }
    }
    &lt;/script&gt;

Vue v-on:click does not work on component

I&#39;ve just discovered the ECMAScript 7 feature `a**b` as an alternative for `Math.pow(a,b)` ([MDN Reference][1]) and came across a discussion in [that post][2], in which they apparently behave differently. I&#39;ve tested it in Chrome 55 and can confirm that the results differ.

`Math.pow(99,99)` returns `3.697296376497263e+197`

whereas

`99**99` returns `3.697296376497268e+197`

So logging the difference `Math.pow(99,99) - 99**99` results in `-5.311379928167671e+182`.

So far it could be said, that it&#39;s simply another implementation, but wrapping it in a function behaves different again:

    function diff(x) {
      return Math.pow(x,x) - x**x;
    }

calling `diff(99)` returns `0`.

Why is that happening?

As [xszaboj][3] pointed out, this can be narrowed down to this problem:

    var x = 99;
    x**x - 99**99; // Returns -5.311379928167671e+182

  [1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Exponentiation_(**)
  [2]: http://www.2ality.com/2016/02/exponentiation-operator.html#comment-2946471782
  [3]: https://stackoverflow.com/users/3454771/xszaboj


Why is Math.pow() (sometimes) not equal to ** in JavaScript?

Where can I find a list of all MIME types that are supported by `Firefox` or `Chrome`? All examples I&#39;ve seen so far using `video/webm` only.

All MIME types supported by MediaRecorder in Firefox and Chrome?

[`position: &#39;sticky&#39;` landed in Chrome 56](https://developers.google.com/web/updates/2016/12/position-sticky), but it makes the border invisible in certain circumstances.

Consider the following example:

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    table {
      border-collapse: collapse;
    }

    thead {
      position: sticky;
      top: 0;
    }

    th {
      background-color: #fff;
      border-right: 5px solid red;
    }

&lt;!-- language: lang-html --&gt;

    &lt;table&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;First&lt;/th&gt;
          &lt;th&gt;Second&lt;/th&gt;
          &lt;th&gt;Third&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
    &lt;/table&gt;

&lt;!-- end snippet --&gt;

In Chrome 56.0.2924.76, only the last `&lt;th&gt;`&#39;s border is visible, and this is only when `&lt;th&gt;` has a `background-color` specified.

Is this a bug in Chrome?

[Playground](http://jsbin.com/fumolopicu/1/edit?html,css,output)

Why border is not visible with &quot;position: sticky&quot; when background-color exists?

I have an old website with JQuery 1.7 which works correctly till two days ago. Suddenly some of my buttons do not work anymore and, after clicking on them, I get this warning in the console:

&gt; Form submission canceled because the form is not connected

The code behind the click is something like this:

     this.handleExcelExporter = function(href, cols) {
       var form = $(&#39;&lt;form method=&quot;post&quot;&gt;&lt;input type=&quot;submit&quot; /&gt;&lt;input type=&quot;hidden&quot; name=&quot;layout&quot; /&gt;&lt;/form&gt;&#39;).attr(&#39;action&#39;, href);
       $(&#39;input[name=&quot;layout&quot;]&#39;, form).val(JSON.stringify(cols));
       $(&#39;input[type=&quot;submit&quot;]&#39;, form).click();
     }

It seems that Chrome 56 doesn&#39;t support this kind of code anymore. Isn&#39;t it? If yes my question is:

 

 1. Why did this happened suddenly? Without any deprecation warning?
 2. What is the workaround for this code?
 3. Is there a way to force chrome (or other browsers) to work like before without changing any code? 

**P.S.**
It doesn&#39;t work in the latest firefox version either (without any message). Also it does not work in IE 11.0 &amp; Edge! (both without any message)

Getting Error &quot;Form submission canceled because the form is not connected&quot;

In the Chrome browser - Chrome developer tools - Network - I can show only POST requests by putting &quot;method:POST&quot; in the Filter search box.
What filter should I use in order to see both PATCH and POST requests?

Chrome developer tools - Network - how to filter only POST and PATCH requests?

I&#39;m trying to inspect websocket traffic using Chrome Developer Tools. From my research it seems you *should* be able to see it using the network tab - and it even has a filter for &#39;ws&#39;. 

However I&#39;ve been inspecting sites that I know are using websockets and can&#39;t find a way to inspect the messages being sent back and forth. Using Chrome v56, also tried Safari with no luck... 

Does anyone know how this can be achieved?

How do you inspect websocket traffic with Chrome Developer Tools?

I&#39;m developing a pinch zoom feature for a mobile app written in javascript and I want to test this in Google Chrome with the mobile device emulation feature. But I cannot find a way to test a pinch gesture.

I tried everything I could find on the internet (pressing Shift and moving the mouse, pressing Alt and moving the mouse), but none of this worked. Is there even a &quot;native&quot; way in Google Chrome to simulate a pinch zoom gesture?

btw I&#39;m using the MacOs version of Google Chrome version 59.0.3071.86

How to simulate pinch zoom in Google Chrome?

Ever since I upgrade from Chrome 58 =&gt; 59 on Mac OS El Capitan, when I use Dev Tools Network inspector to view WebSocket frames, the frames no longer are visible.  We build an app that makes heavy use of WS, so I rely heavily on this capability.

I thought perhaps it was something maybe we changed in our app -- encoding or protocol that maybe causes it to not show up, so I tried this simple test here: https://websocket.org/echo.html

1. Open DevTools
2. Go to https://websocket.org/echo.html
3. Go to Network tab, filter on WS, go to Frames tab
4. Click Connect in echo app followed by Send Message

This results in no frames showing up in DevTools, but the socket messages work fine with the app.  I&#39;ve asked a few other people and some of them do not have this problem.

I&#39;m wondering if I either have an extension that is causing this issue, or if I have some other arcane setting that might be blocking the frames from displaying?

[![enter image description here][1]][1]


  [1]: https://i.stack.imgur.com/dUrZQ.png

Chrome 59+ websocket frames no longer visible in DevTools

The Coverage tool is good at finding used and unused code.  However, there doesn&#39;t appear to be a way to save or export only the used code.  Even hiding unused code would be helpful.

I&#39;m attempting to reduce the amount of Bootstrap CSS in my application; the file is more than 7000 lines.  The only way to get just the used code is to carefully scroll thru the file, look for green sections, then copy that code to a new file.  It&#39;s time-consuming and unreliable.

Is there a different way?  Chrome 60 does not seem to have added this functionality.

Content Type	Original Author	Original Content on Stackoverflow
Question	StackOverMySoul	View Question on Stackoverflow
Solution 1 - Javascript	Kayce Basques	View Answer on Stackoverflow
Solution 2 - Javascript	nibnut	View Answer on Stackoverflow

find where in the code an http request was made using chrome dev tools

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

Solution 2 - Javascript

react-native .toLocaleString() not working on android

React Native / Xcode Upgrade and now RCTConvert.h not found

Attributions